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