スクロールできる表

表をかっこよくスクロール可能にするテクニックについてのResponsive scrollable tablesという記事を読んだ。この記事ではJavaScriptで表をdiv要素で括って、それから溢れたらスクロールバーを表示(+α)という形でやっている。これをいじってて気づいたんだけど、JavaScriptで追加マークアップをする代わりにtable要素のdisplayプロパティーをいじってやると簡単にスクロール可能な表になるようだ。

Demo: Scrollable Table

表を自動幅調整なし(幅固定)にするにはtable-layoutプロパティーを、各セルで折り返しなしにするにはwhite-spaceプロパティーをそれぞれ使う。それとdisplay: blockを組み合わせると、pre要素で文字がはみ出す時にスクロールさせるような感じになる。

table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  table-layout: fixed;
}

th,
td {
  white-space: nowrap;
}

スクリーン・リーダーがdisplay: blockな表をどう解釈するか微妙な感じがあるけど、こっちの方がお手軽。表じゃなくなるのでborder-collapseプロパティー等に影響があるけど、子のtd要素等にはその影響は波及しないのであまり問題もなさそう。

スクロールバーが、表の大きさ的な理由で気づかない、またはブラウザーのUI的な理由で見えないことが多いので、パッと見て横にはみ出してスクロールすると全部見える表なのかどうかがわかりづらい。ウェブページは横にはみ出さないもの的な先入観を持つ人も多いしそれで普通だと思うので、表の表示の仕方としては適切ではない気もする。元記事の実装のようにはみ出したら影というような補助が必要で、そうできればすごく良さそうだけどCSSだけでは難しそう。