如何使用 HTML 和 CSS 定义表格列宽？-css教程-PHP中文网

如何使用 HTML 和 CSS 定义表格列宽？

Patricia Arquette

发布： 2024-10-29 19:19:29

原创

763 人浏览过

How to Define Table Column Widths Using HTML and CSS?

在 HTML 和 CSS 中定义表格列宽

要在提供的表格中设置列宽：

CSS width 属性：

利用 CSS 中的 width 属性来定义每个表格列的宽度。您可以指定以像素 (px) 为单位的值或父元素宽度的百分比 (%)。

示例：

<code class="css">table {
  width: 100%;  /* Table takes up 100% page width */
}

colgroup {
  display: inline-block;
  width: 100%;
}

col {
  /* Set column widths as a percentage of the parent column group */
  width: 15%;
  width: 70%;
  width: 15%;
}

/* Additional styling for visual demonstration */

td {
  background-color: #aaa;
}

td:nth-child(1), td:nth-child(3) {
  background-color: #777;
}</code>

登录后复制

HTML 标记:

<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>
  <!-- Insert table headers, body, and rows here -->
</table></code>

登录后复制

此解决方案分别为“发件人”、“主题”和“日期”列分配 15%、70% 和 15% 的宽度。此外，它还确保表格延伸到整个页面宽度。

以上是如何使用 HTML 和 CSS 定义表格列宽？的详细内容。更多信息请关注PHP中文网其他相关文章！