在各种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中文网其他相关文章！
