HTMLのテーブルのヘッダーを縦に表示する方法

HTML CSS

HTMLのテーブルのヘッダーを縦に表示する方法

HTMLのテーブルのヘッダーを縦に表示する方法について解説します。
テーブルのヘッダーを縦に表示するためには、CSSを使用して、テーブルのセル内のテキストを回転させる方法が一般的です。
以下では、HTMLとCSSを別ファイルに分けて、テーブルのヘッダーを縦に表示する具体的な方法を示します。

HTMLファイル（index.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ファイル（styles.css）

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

.test-table, .test-table th, .test-table td {
  border: 1px solid #ddd;
}

.test-header {
  background-color: #f4f4f4;
  text-align: center;
  padding: 8px;
  width: 100px; /* 固定幅での調整が可能 */
  height: 200px; /* ヘッダーの高さを設定 */
  transform: rotate(-90deg);
  transform-origin: left bottom;
  white-space: nowrap; /* テキストの折り返しを防ぐ */
}

.test-cell {
  padding: 8px;
  text-align: center;
}

解説

1. HTML構造:

  • tableタグでテーブルを定義し、thead内にtrタグを使用してヘッダー行を作成します。
  • thタグを使用してヘッダーセルを作成し、tbody内にデータ行を追加します。

各セルにはtest-headerやtest-cellというクラスを付けてスタイルを適用します。

2. CSSスタイル:

  • test-tableクラスに対して、border-collapse: collapse;を指定して、テーブルの境界線を重ね合わせる設定をしています。

テーブルの幅を100%に設定して、親要素の幅に合わせるようにしています。

  • test-headerクラスでは、transformプロパティを使用して、テキストを-90度回転させています。

transform-originを使用して、回転の基準点を左下に設定し、テキストが正しい位置に配置されるようにしています。

  • white-space: nowrap;を設定することで、テキストがセル内で折り返さないようにし、回転後もテキストが適切に表示されるようにしています。

この方法では、ヘッダーを縦に表示することができますが、デザインによっては、回転させたテキストがテーブルの幅に収まらない場合もあります。
その場合は、widthやheightを調整することで、レイアウトを調整できます。

このように、CSSのtransformプロパティを使用して、HTMLテーブルのヘッダーを縦に表示することができます。
デザインのニーズに合わせて、スタイルを調整してみてください。