HTML と 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>

このソリューションは、「From」、「Subject」、「Date」列にそれぞれ 15%、70%、および 15% の幅を割り当てます。さらに、表がページ幅全体に広がることが保証されます。

以上がHTML と CSS を使用してテーブルの列幅を定義する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。