如何使用 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中文网其他相关文章！