在許多網頁設計中，表格是必不可少的元素之一。然而，當表格中的內容太寬或太長時，表格通常會出現滾動條，使用戶的瀏覽體驗變得不太友好。這時，我們需要設置表格的列寬度自適應，讓表格在屏幕上自動縮放，不必出現滾動條。 在 HTML 中，我們可以通過 CSS 來設置表格的寬度和高度。接下來，我們就給大家展示一段代碼，如何用 HTML 和 CSS 設置表格列寬度自適應。 首先，我們先給出一個簡單的表格代碼：

<table>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td>小紅</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>22</td>
</tr>
</table>

以上代碼設置了一個簡單的表格，包含了三列：姓名、性別和年齡。我們來修改一下代碼，使表格列寬度自適應：

<table style="width:100%;">
<colgroup>
<col style="width:auto;"/>
<col style="width:auto;"/>
<col style="width:auto;"/>
</colgroup>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td>小紅</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>22</td>
</tr>
</table>

我們在表格中加了一個 colgroup 元素，并設置了三個 col 元素，用于表示每一列的寬度。其中，width:auto;表示對應列寬度自適應屏幕大小。而在 table 元素中，設置了寬度為 100%，使表格占據整個屏幕。 最終，我們在 HTML 中設置表格列寬度自適應的代碼展示完畢。希望以上內容對你有所幫助。