Responsive Tables in Pure CSSという記事を読んだ。狭い画面での表のレンダリングに問題があって、それを解決したいということは勿論わかるのだけど、これはないなという感想しか残らない。表は行と列の交点でデータを把握でき、その上下左右と簡単に比較できるというためのものであって、そういった機能を破壊してビューポートに収めようというのはもはやレスポンシブではない。

レスポンシブ・ウェブ・デザインが広まってから何度もこの類いのものを見せられてきた。もしこのように各行を展開して表示したいようなコンテンツであるのなら、dl要素を使うべきで、それを広い画面ではコンパクトに表のようにデザインするべきだろう。逆に表である必要があるのなら、変にセルが縮まったりしないように調節し、横にスクロールして閲覧できるようにするべきだ。

ただ確かにモバイル機器のブラウザーでの表の閲覧には難がある。せめてthを使ったら上端と左端のセルは固定してスクロールできる仕組みが組み込みで用意されてたりすると良いのかなと思うがなかなか難しい。しかしそれをどうにかしようとして表としての機能を失わせるのは本末転倒だろう。