HTMLのテーブルのセル幅を設定する方法

HTML CSS

HTMLのテーブルのセル幅を設定する方法

HTMLのテーブルセル幅を設定する方法について、HTMLとCSSを別ファイルに分けて、詳細に説明します。

HTMLファイル

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>テーブルセル幅設定例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <table class="test-table">
    <thead>
      <tr>
        <th class="test-header">ヘッダー1</th>
        <th class="test-header">ヘッダー2</th>
        <th class="test-header">ヘッダー3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="test-cell">データ1</td>
        <td class="test-cell">データ2</td>
        <td class="test-cell">データ3</td>
      </tr>
      <tr>
        <td class="test-cell">データ4</td>
        <td class="test-cell">データ5</td>
        <td class="test-cell">データ6</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

CSSファイル

.test-table {
  width: 100%;
  border-collapse: collapse;
}

.test-header,
.test-cell {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.test-header {
  background-color: #f4f4f4;
}

/* セル幅を設定する例 */
.test-header:nth-child(1),
.test-cell:nth-child(1) {
  width: 150px; /* 1列目の幅を150pxに設定 */
}

.test-header:nth-child(2),
.test-cell:nth-child(2) {
  width: 200px; /* 2列目の幅を200pxに設定 */
}

.test-header:nth-child(3),
.test-cell:nth-child(3) {
  width: 250px; /* 3列目の幅を250pxに設定 */
}

説明

この例では、HTMLとCSSを使用してテーブルセルの幅を設定する方法を示しています。
HTMLファイルでは、テーブルを作成し、各セルにクラスtest-cellを適用しています。
CSSファイルでは、テーブル全体のスタイルとともに、各列の幅を指定しています。

セル幅の設定

CSSでは、テーブルの特定の列に対して幅を設定できます。
ここでは、nth-childセレクタを使用して、テーブルの列ごとに異なる幅を設定しています。
test-header:nth-child(1)は、1列目のヘッダーに対して、test-cell:nth-child(1)は、1列目のデータセルに対して幅を設定しています。
同様に、2列目と3列目についても設定しています。

これにより、テーブルの列幅を簡単に調整することができ、デザインに合わせたレイアウトを作成できます。
また、テーブルの幅は全体で100%に設定しているため、ページの幅に応じてテーブルが適切に表示されますが、個々の列の幅は固定されています。

この方法を使用すると、異なる列に異なる幅を設定でき、表の見た目を調整する際に便利です。
各列に対して適切な幅を指定することで、データの表示が見やすくなり、テーブルのレイアウトをより効果的に管理できます。