開発 2024.03.06

【CSS】横スクロールできるテーブルの作り方とスクロールバーのカスタマイズ

みんなの簡素を教えてね！

すごい！ (0)
やってみようと思う！ (0)

HTMLでテーブルを作成すると、特にスマホ表示をした際に表が画面幅よりも大きくなり、潰れて読みにくくなってしまうことがあります。このような場合、全体を見やすくするためにスクロール可能なテーブルを作成する方法を知っておくと便利です。
この記事ではテーブルをスクロール可能にするための簡単なHTML/CSSの使い方を紹介します。

1 基本的な考え方
2 解説
- 2.1 HTMLでテーブルを作成
- 2.2 CSSでスクロールを可能にする
3 tableのスクロールバーをカスタマイズする
- 3.1 ポイント
- 3.2 注意点
4 デモ
5 まとめ

基本的な考え方

テーブルをスクロール可能にする方法の基本的な考え方は、テーブルを親要素（<div>タグなど）で囲い、その親要素のサイズを超えた場合にスクロールバーを表示させるというものです。以下のcssを追加することで、簡単にスクロール可能なテーブルを作成できます。

テーブルを囲む親要素に overflow: auto; を指定
th、tdに white-space: nowrap を指定

スマートフォン使用時のテーブル表示崩れだけに対応させるには、上記cssを指定のメディアクエリの中に入れましょう。

解説

HTMLでテーブルを作成

まず、HTMLを使って基本的なテーブルを作成します。親要素よりもテーブルが大きくなるように、コンテンツは長めに設定しています。

<div class="table_box">
    <table>
        <tbody>
            <tr>
                <th>見出し1</th>
                <td>見出し1の内容ダミーテキスト<br>ダミーテキストダミーテキストダミーテキスト</td>
                <td>見出し1の内容ダミーテキスト</td>
                <td>見出し1の内容ダミーテキスト</td>
                <td>見出し1の内容ダミーテキスト</td>
            </tr>
            <tr>
                <th>見出し2</th>
                <td>見出し2の内容ダミーテキスト</td>
                <td>見出し2の内容ダミーテキストダミーテキストダミーテキスト</td>
                <td>見出し2の内容ダミーテキスト</td>
                <td>見出し2の内容ダミーテキスト</td>
            </tr>
            <tr>
                <th>見出し3</th>
                <td>見出し3の内容ダミーテキスト</td>
                <td>見出し3の内容ダミーテキスト</td>
                <td>見出し3の内容ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</td>
                <td>見出し3の内容ダミーテキスト</td>
            </tr>
        </tbody>
    </table>
</div>

この例では、<div>タグでテーブルを囲み、この<div>にクラス名table_boxを指定しています。このクラス名を後でCSSで使用します。

CSSでスクロールを可能にする

CSSを使用してテーブルをスクロール可能にします。

.table_box {
    overflow-x: auto;
    display: block;
}

.table_box table th,
.table_box table td {
    white-space: nowrap;
}

これでスクロール可能なテーブルができました。

tableのスクロールバーをカスタマイズする

上記までのやり方だと、スクロール可能になったテーブルのスクロールバーはデフォルトのものになっています。これをカスタマイズしていきましょう。

スクロールバーの見た目をカスタマイズするには、CSSを利用してスタイルを定義します。多くのモダンブラウザではスクロールバーのカスタマイズが可能ですが、ブラウザによってサポートされているプロパティが異なる場合があるため注意が必要です。ここでは、主にWebkitベースのブラウザ（Chrome、Safariなど）で利用可能なスクロールバーのスタイル指定方法を紹介します。

ポイント

::-webkit-scrollbarはスクロールバー全体のスタイルを指定します。
::-webkit-scrollbar-trackはスクロールバーの背景部分（トラック）のスタイルを指定します。
::-webkit-scrollbar-thumbはスクロールバーの操作部分（サム）のスタイルを指定します。ユーザがクリックしてドラッグする部分です。
スクロールバーの操作部分にマウスホバーしたときのスタイルは、::-webkit-scrollbar-thumb:hoverで定義します。スマホで有効になる前提なら不要です。

以下のCSSは、スクロールバーの幅、スクロールバーの背景部分（トラック）、スクロールバーの操作部分（サム）の色をカスタマイズする例です。

/* スクロールバー全体を対象にする */
.table_box::-webkit-scrollbar {
    width: 10px; /* スクロールバーの幅 */
    height: 10px; /* スクロールバーの高さ */
}

/* スクロールバーの背景部分をカスタマイズ */
.table_box::-webkit-scrollbar-track {
    background: #f1f1f1; /* スクロールバーの背景色 */
    border-radius: 5px; /* 角丸にする */
}

/* スクロールバーの操作部分をカスタマイズ */
.table_box::-webkit-scrollbar-thumb {
    background: #888; /* スクロールバーの操作部分の背景色 */
    border-radius: 5px; /* 角丸にする */
}

/* スクロールバーの操作部分にホバーした時のスタイル */
.table_box::-webkit-scrollbar-thumb:hover {
    background: #555; /* ホバー時のスクロールバーの操作部分の背景色 */
}

注意点

このカスタマイズ方法はWebkitベースのブラウザ（Chrome、Safariなど）に有効です。FirefoxやiOSのSafariなど、他のブラウザでは異なる方法が必要な場合があります。
ブラウザの更新により、対応するCSSプロパティが変わる可能性があります。実装の際は、最新のCan I Useなどを参照してください。

デモ

「スクロール可能なテーブル関連のCSS」というコメントアウト以下に今回ご紹介したCSSが入っています。

See the Pen
横スクロール可能で、スクロールバーがカスタマイズされたtable by GROWORKS (@groworks)
on CodePen.

まとめ

この方法で、HTMLテーブルをスクロール可能にすることができます。これにより、ユーザーがテーブルの全内容を簡単に閲覧できるようになります。CSSを少し変更することで、テーブルの見た目をさらにカスタマイズすることも可能です。HTMLとCSSの基本を理解していれば、簡単に実装できるはずです。また、スクロールバーをカスタマイズすることで、ウェブサイトやアプリケーションの見た目をより一貫性があるデザインに仕上げることができます。ただし、ブラウザごとの対応プロパティの違いも少々あるため、カスタマイズは適度に行うことが重要です。