在網頁設計中，表格常常是必不可少的元素。為了更好地顯示表格中的內容，我們通常會對表格進行樣式調整。其中，CSS表格滑動標題不變是一種非常實用的技巧。該技巧可以使表格在滾動時標題保持不變，方便用戶查看表格內容。

首先，我們需要給表格添加以下樣式：

table{
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
thead{
display: table-header-group;
}
tbody{
display: table-row-group;
height: null;
overflow-y: auto;
}
tr{
display: table-row;
}
th, td{
padding: 10px;
text-align: center;
}
th{
position: sticky;
top: 0;
background-color: #fff;
z-index: 10;
}

以上樣式會使表格完全填充指定寬度的容器，并將表格行和單元格的邊框合并，使表格更美觀。同時，對thead和tbody進行特殊配置，讓它們在表格中以表頭和表體的形式顯示。tr是表格的行，th和td是單元格。其中，th需要采用sticky定位，使其在滾動表格時保持固定位置。

接著，我們需要為表格容器添加以下樣式：

.container{
width: 100%;
height: 300px;
overflow: auto;
}

以上樣式會為容器設置寬度和高度，并啟用滾動條。

最后，我們需要在HTML中添加以下代碼：

<div class="container">
<table>
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>男</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>30</td>
<td>上海</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>28</td>
<td>廣州</td>
</tr>
<tr>
<td>趙六</td>
<td>女</td>
<td>27</td>
<td>深圳</td>
</tr>
</tbody>
</table>
</div>

以上代碼會生成一個包含表頭和表體的表格，并將其放入一個高度為300px的滾動容器中。

通過以上樣式和代碼，我們就可以輕松實現CSS表格滑動標題不變。當用戶滾動表格時，表頭會始終保持在可見區域的頂部，方便用戶查看表格內容。