CSS スクロールするテーブルの作成

概要

こんな感じのスクロールするテーブルを作成します。
スマホなどの画面ではテーブルを普通に設置するのでは見にくいので、これが有用だと思います。

列1	列2	列3	列4
AAAAAAAAAAAAAAAAAAAA	XXXXXXXXXXXXXXXXXXXXXXXX	YYYYYYYYY	ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ

手順

まず、表の親要素を作成します。
というのもスクロールする表はある親要素を指定したときにその要素を超える範囲のものをスクロールで表現するというようにして実現するからです。
overflow: hiddenで指定した要素を超える幅・高さの部分を非表示にして、
overflow-x: scrollで横方向の超えた範囲を表示できるようにします。

後は子要素に表示したいテーブルを作成すればいいため、以下のコードならば次の表が表示できます。

<style>
	/*親要素の作成*/
    div.scrollTable {
        width: 80%;
        overflow: hidden;
        overflow-x: scroll;
        border: 2px solid black;
    }

    /*テーブル*/
    div.scrollTable table {
        background-color: red;
    }

    /*tdとth*/
    div.scrollTable table td,
    div.scrollTable table th {
        border: 1px solid #cbced2;
        border-collapse: collapse;
    }

</style>

<div class="scrollTable">
	<table>
		<tr><th>列1</th><th>列2</th><th>列3</th><th>列4</th></tr>
		<tr><td>AAAAAAAAAAAAAAAAAAAA</td><td>XXXXXXXXXXXXXXXXXXXXXXXX</td><td>YYYYYYYYY</td><td>ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ</td></tr>
	</table>
</div>

列1	列2	列3	列4
AAAAAAAAAAAAAAAAAAAA	XXXXXXXXXXXXXXXXXXXXXXXX	YYYYYYYYY	ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ

改善

先ほどの表では表が無限に横方向に伸びていました。
これはこれで見にくいのでこれを改善していきます。具体的には、

• tdとthの上限サイズをmax-widthで指定。
• tableに対してtable-layout: fixedを指定(こうしないとtdとthに指定したmax-widthが機能しない)
• これだけでは、表中の文字が枠を無視してはみ出てしまうので、tdとthにword-wrap: break-wordを指定する。

ということをしていきます。

<style>
	/*親要素の作成*/
    div.scrollTable2 {
        width: 80%;
        overflow: hidden;
        overflow-x: scroll;
        border: 2px solid black;
    }

    div.scrollTable2 table {
        table-layout: fixed;
        background-color: red;
    }

    div.scrollTable2 table td,
    div.scrollTable2 table th {
        word-wrap: break-word;
        border: 1px solid #cbced2;
        border-collapse: collapse;
        max-width: 300px;
    }
</style>


<div class="scrollTable2">
	<table>
		<tr><th>列1</th><th>列2</th><th>列3</th><th>列4</th></tr>
		<tr><td>AAAAAAAAAAAAAAAAAAAA</td><td>XXXXXXXXXXXXXXXXXXXXXXXX</td><td>YYYYYYYYY</td><td>ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ</td></tr>
	</table>
</div>

列1	列2	列3	列4
AAAAAAAAAAAAAAAAAAAA	XXXXXXXXXXXXXXXXXXXXXXXX	YYYYYYYYY	ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ