今回は、有名なCSSフレームワーク「Bootstrap」を使用した際に、個人的に発見のあった<table>の使用について書きます。
HTMLで<table>とは
自分がコーディングに興味を持ち始めたころは、「テーブル＝食卓」のイメージがあり、「table＝表」に違和感がありました。
また、コーディングを勉強し始めたころは、ゴリゴリとテーブルレイアウトでページを作成していたこともあります。
が、<table>とは、食卓ではなく、Webページのレイアウトをするモノでもなく、情報を伝わりやすくするためなどに
「表」を実現するタグです。
<table>は優秀
<table>は表の一つの列のセルの幅を内容に合わせて統一し調整してくれて優秀です！
また、ウィンドウを縮めたり、内容のテキストが長い場合は自動で折り返してくれたりもします。
もちろんCSSで横、縦幅、罫線、テキスト位置などが調整できるので、デザインも自由に表現することが出来ます。
スマホでの<table>
しかし、そんなテーブルにも使用する上で問題がありました。
従来のPCの画面サイズで見ときは可読性に問題なく表示されている状態だったとしても、スマホなどの小さな画面サイズで
確認すると、テーブルの項目数が多く表示されてしまったりテキストの自動折り返しの影響でテキストがほぼ縦書きのような
状態になってしまうという問題が起こります。
また、それを回避しようとCSSの設定（折り返して表示させないなど）の親の幅を無視すると、思わぬデザイン崩れが起こって
しまうことがあります。
課題として、そういったケースをどう表現するのが賢明なのかが悩みどころでした。
Bootstrapでの仕様
そこで冒頭に書きましたが、Bootstrapという有名なCSSフレームワークを使うことがあり、確認してみたところ、
1<div class="table-responsive">
2<table class="table">
3...
4</table>
5</div>
6と記述することで、一定幅以下の場合にはテーブルの親のCSSに”overflow-x: scroll;”が適用され、スクロールしてテーブルを
確認することが出来るようになるという仕様でした。
この方法だと、可読性を損なうことなくスマホでテーブルの実装を行うことができる！すごい！と、目からウロコでした。
まとめ
世の中には様々な技術があり、常日頃から学ぶ意識を持ち調べることが大切だと改めて実感しました。