HTMLのテーブルを横向きに表示する方法

HTML CSS

HTMLのテーブルを横向きに表示する方法

HTMLテーブルを横向きに表示する方法について説明します。
ここでは、HTMLとCSSのファイルを分けて提供し、クラス名やID名には「test-」をプレフィックスとして使用します。

HTMLとCSSのファイル分け

HTMLファイル（例: table-horizontal.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>
  <div class="test-container">
    <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>
  </div>
</body>
</html>
CSSファイル（例: styles.css）
.test-container {
  overflow-x: auto;
  width: 100%;
}

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

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

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

.test-cell {
  background-color: #fff;
}

横向きに表示するための説明

テーブルを横向きに表示する場合、通常はテーブルの幅が画面幅を超えることが多いため、CSSのoverflow-xプロパティを使用して水平スクロールを実装します。
上記の例では、test-containerクラスがこの役割を担っています。
overflow-x: autoを設定することで、テーブルが親要素の幅を超えた場合にスクロールバーが表示されます。

さらに、テーブルの幅を100%に設定することで、親要素（この場合はtest-container）に対して100%の幅を持ちます。
これにより、テーブルの幅が親要素の幅に合わせて調整され、横方向にスクロール可能になります。

test-tableクラスに設定されたtable-layout: fixedプロパティは、テーブルの列幅を固定するために使用します。
これにより、テーブルが広がることなく、列の幅が一定に保たれます。
固定レイアウトを使用することで、テーブルの横方向のスクロールがスムーズになります。

また、テーブルのデザインにはborder-collapse: collapseを使って、セルの境界線を重ねて表示し、より一体感のある見た目にしています。
test-headerとtest-cellクラスにはそれぞれ異なるスタイルが設定されており、test-headerには背景色と太字が適用されています。

この方法を使うことで、テーブルが画面幅を超える場合でも、ユーザーは横スクロールを使ってテーブルの内容を確認することができ、データを見やすく表示することができます。