如何使用 CSS 精確控制 HTML 表格結構中的列寬？

設定表格結構的列寬

在各種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中文網其他相關文章！