在各種Web開發場景中，需要精確控製表格列的寬度以達到最佳的呈現效果。讓我們考慮以下用作收件匣的簡單HTML 表格：
<code class="html"><table border="1">
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table></code>我們的目標是將“From”和“Date”列的寬度設定為頁面寬度的15%，而“Subject”列佔據剩餘的70% %。此外，我們希望表格本身延伸到整個頁面寬度。
為了解決這個問題，我們可以利用 col 元素中的 CSS width 屬性。此屬性允許我們使用不同的單位（包括像素或百分比）來指定各個列的寬度。
<code class="html"><table style="width: 100%">
<colgroup>
<col span="1" style="width: 15%;">
<col span="1" style="width: 70%;">
<col span="1" style="width: 15%;">
</colgroup>
<!-- Table body and rows -->
</table></code>在此範例中，我們在 colgroup 容器中建立一組三個 col 元素。每個 col 元素代表一個表格列，並使用內聯 CSS 樣式指派其所需的寬度。透過指定百分比，列寬將按比例適應整個表格寬度。
以上是如何使用 CSS 精確控制 HTML 表格結構中的列寬？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
