首頁 >web前端 >css教學 >如何使用 HTML 和 CSS 定義表格列寬?

如何使用 HTML 和 CSS 定義表格列寬?

Patricia Arquette
Patricia Arquette原創
2024-10-29 19:19:29844瀏覽

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn