メッセージ
2015年01月10日の記事
2015/01/10(土)<table> タグのレスポンシブＷｅｂデザイン対応
2017/10/12 18:48
筆者では主に３つの手法を使いました。
１）superTable.js (Javascript) を使って、横幅を一定に保ちつつ横スクロール。
表の左端や最初の行を固定表示にすることもできます。
表の部分を左フリック（指を画面上にて左にサッと滑らす）すると左に、
表の部分を右フリック（指を画面上にて右にサッと滑らす）すると右に、
スクロールします。
このJavascript は有名らしく、現在は Grid という名前に変わっていて、当方が取得したバージョンから見て、大幅に対応が改善されています。
＃このJavascript にて、非推奨のものが使われているため、後日 Grid.js へ換装しないといけないかなというところです。。
もちろん、横に表示させても大丈夫です。
設置方法は、提起サイトのソースコードを見れば参考になると思います。
２）CSS にて表示体裁を変更する。
左側はやや複雑なCSS で、汎用化するのはちょっと難しいかもしれません。
ちなみに元ネタ（ＰＣ版）はこんな感じ ↓
右側は、<thead> の左フロートと、<tbody> の block 表示で、これは CSS による <table> のレスポンシブ化手法では一般的なものの様です。
元ネタ（ＰＣ版）はこんな感じ ↓
探せば沢山出てくるのですが、いちいち検索するのも面倒なので、時間がとれるときにここにまとめておきたいと考えています。