CSS 左固定右スクロール：テーブルヘッダー固定で快適な横スクロールを実現

Webサイトでテーブルを使う際、データ量が多いと横スクロールが必要になるケースがあります。しかし、スクロールするとヘッダーが見えなくなり、どの列のデータか分からなくなるという問題が発生します。「css 左固定右スクロール」テクニックを使えば、この問題を解決し、ユーザーにとって見やすいテーブルを作成できます。

CSS 左固定右スクロール：ヘッダー固定で視認性アップ

前回の記事では、テーブルを横スクロールさせる方法を紹介しました。しかし、テーブルの構造や内容によっては、横スクロール時に視認性が低下する可能性があるため、注意が必要だと述べました。今回は、その問題を解決する手法として、左側のヘッダー列を固定したまま右側のコンテンツをスクロールさせる方法を紹介します。

デモ：ヘッダー固定の効果

まずは、ヘッダーを固定した場合としない場合の表示の違いをデモで確認してみましょう。

ヘッダー固定なし

THの見出し	テキストテキスト	テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキストテキストテキスト
THの見出し	テキストテキスト	テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキストテキストテキスト
THの見出し	テキストテキスト	テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキストテキストテキスト
THの見出し	テキストテキスト	テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキストテキストテキスト
THの見出し	テキストテキスト	テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキストテキストテキスト

ヘッダー固定あり

THの見出し	テキストテキスト	テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキストテキストテキスト
THの見出し	テキストテキスト	テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキストテキストテキスト
THの見出し	テキストテキスト	テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキストテキストテキスト
THの見出し	テキストテキスト	テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキストテキストテキスト
THの見出し	テキストテキスト	テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキストテキストテキスト

ヘッダーを固定することで、スクロールしてもヘッダー列が常に表示され、データの識別が容易になります。

CSS 左固定右スクロール：実装方法

HTML

固定したい<th>要素にstickyクラスを追加します。

<div class="table-scroll">
  <table>
    <tr>
      <th class="sticky">THの見出し</th>
      <td>...</td>
    </tr>
    ...
  </table>
</div>

CSS

.table-scroll {
  overflow-x: auto;
}

.table-scroll table {
  width: 100%;
  min-width: 1000px;
  table-layout: fixed;
  border-collapse: collapse;
}

.table-scroll th,
.table-scroll td {
  width: 200px;
  padding: 15px;
  border: 1px #ccc solid;
}

.table-scroll th.sticky {
  position: sticky;
  left: 0;
  top: 0;
  background: #eee; /* 背景色を設定 */
  border-left: 1px #ccc solid; /* 左枠線を設定 */
  box-sizing: border-box; /* border-boxを指定 */
  z-index: 1; /* sticky要素を前面に表示 */
}

ポイントはposition: sticky;、left: 0;で左に固定し、z-index: 1;で最前面に表示することです。backgroundとborder-leftで背景色と左枠線を再設定することで、スクロール時の視覚的な不具合を解消します。また、box-sizing: border-box;を指定することで、borderを含めた幅を指定できます。

CSS 左固定右スクロール：うまくいかない場合のチェックポイント

tableにborder-collapse: collapse;が設定されているか
position: sticky;が正しく設定されているか
z-indexが適切に設定されているか
backgroundとborder-leftが再設定されているか
box-sizingがborder-boxに設定されているか

まとめ

「css 左固定右スクロール」テクニックを用いることで、テーブルの左側のヘッダーを固定し、右側のコンテンツをスクロールさせる方法を解説しました。この方法により、データ量の多いテーブルでも視認性を高く保つことができます。上記コードとチェックポイントを参考に、ぜひ実装してみてください。

よくある質問

Q: 左側の固定部分がスクロールしません。: A: position: fixed; プロパティが正しく設定されていること、および height プロパティが適切な値に設定されていることを確認してください。
Q: 右側のコンテンツが左側の固定部分の下に隠れています。: A: margin-left プロパティが左側の固定部分の幅と同じ値に設定されていることを確認してください。
Q: モバイルデバイスでレイアウトが崩れてしまいます。: A: CSS メディアクエリを使用して、異なる画面サイズに合わせてレイアウトを調整してください。

その他の参考記事:CSS の位置