CSS表格百分比控制寬是一種非常有效的方法，可以讓網(wǎng)頁(yè)中的表格根據(jù)不同屏幕尺寸自動(dòng)調(diào)整寬度，從而提高用戶的瀏覽體驗(yàn)。下面我們將簡(jiǎn)單介紹如何使用CSS百分比來(lái)控制表格寬度。

首先，在HTML中建立一個(gè)簡(jiǎn)單的表格代碼，如下所示：

<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>張三</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>20</td>
</tr>
</tbody>
</table>

接下來(lái)，我們使用CSS來(lái)控制表格的寬度。為了使表格寬度與頁(yè)面相同，請(qǐng)將表格的寬度設(shè)置為100%。例如，

table {
width: 100%;
}

現(xiàn)在，我們將使用CSS百分比來(lái)控制表格的列寬。例如，我們希望第一個(gè)列寬占25%，第二個(gè)列寬占50%，第三個(gè)列寬占25%。代碼如下：

th:nth-child(1),
td:nth-child(1) {
width: 25%;
}
th:nth-child(2),
td:nth-child(2) {
width: 50%;
}
th:nth-child(3),
td:nth-child(3) {
width: 25%;
}

在這個(gè)代碼中，我們使用nth-child選擇器來(lái)選擇表格的第一、二、三列。然后，我們將每列的寬度設(shè)置為我們期望的百分比。

通過(guò)這種方法，我們可以輕松地使用CSS百分比來(lái)控制表格的寬度。不僅如此，還能幫助我們實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)，為用戶提供更好的瀏覽體驗(yàn)。