PPP's Blog

雑コード帳

トップ > CSS > 横並びのテーブルを縦に並べて横スクロールさせる（レスポンシブ）

横並びのテーブルを縦に並べて横スクロールさせる（レスポンシブ）

CSS

TL,DR

  • tableタグを囲むdivにoverflow-x: autoを設定する。
  • floatを利用して左右に分けていたものをflexでつくりなおす。
  • 横スクロールさせるには、あらかじめtableの長さを多めに設定する必要がある。

目次

やりたいこと

以下のような、最初の列にthタグが並ぶタイプのマークアップのときに スマホ表示した際に縦表示したい。

<table>
    <thead>
        <tr>
            <th>年度</th>
            <th>2018</th>
            <th>2019</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>従業員人数（人）</th>
            <th>有給休暇取得率</th>
            <th>時間外労働時間（年間平均）</th>
        </tr>
        <tr>
            <td>1,000</td>
            <td>70.1%</td>
            <td>194時間</td>
        </tr>
    </tbody>
</table>

それをおこなうに当たって、下記サイトを参考にしたのだが、

theadとtbodyを左右に分ける際にfloatを利用していたため、これをflexに書き換えたいのだ。

実際にやったこと

縦並びにする

  • theadとtbodyをflexで横並びにする
table {
    display: flex;
}
  • thead・tbody内のセルたちを縦並びにするためにdisplay:blockを指定する
tr, th, td {
  display: block;
}
  • tbody内のセルのみ横並びにするためflexを設定する
tbody tr {
  display: flex;
}

見た目を整える

  • widthの設定
thead {
  width: 10%;
}
tbody {
  width: 90%;
}
th, td {
  display: block;
  width: 100%;
}

テーブルを横スクロールさせる

  • スクロールさせるためにtableタグにdivタグを被せる
<div class="container">
  <table>...</table>
</div>
  • divにoverflow-xを指定する
.container {
  overflow-x: auto;
}
  • テーブルにwidthを指定する（表示するディスプレイサイズよりも大きな値を指定することでスクロールさせることができる）
table {
  width: 800px;
}

おわり

成果物（実際に書いたコード）

CodePen

See the Pen table layout practice 1 by itsumoonazicode (@itsumoonazicode) on CodePen.

今回参考にしたサイト