表のレスポンシブ対応

以前、表作成プラグイン「TablePress」を使ってみて、
まずまずの表ができたと思っていたのだけれど、気づいてしまいました。
レスポンシブ対応できていなかったことに。

レスポンシブというのは、こと表に関してはいつも悩まされます。

「TablePress」には、レスポンシブ対応にできる、拡張ブラグインもあるようなのですが、
列が多いと、行ごとの文字が少しで改行ばかりの縦長な表になってしまうようです。

表によっては、それで十分だと思うのですが、今回は横が６列の表だったので、
ちょっと見た目的にあんまりなんじゃないかと思って、結局作り直すことに。

今回は、「TinyMCE Advanced」の表作成機能をつかうことにしました。

が、やっぱりレスポンシブ対応は難しかったです。

幅サイズをピクセル指定しなければ、レスポンシブ対応の表になると書いてあったのですが、
どうしても見にくい表になってしまいます。

結局、ツールでできるレスポンシブ対応には限界があるとさとり、
ＰＣの方は「TinyMCE Advanced」でつくた表をそのまま表示させ、
スマホの方はCSSで対応することにしました。

「表　レスポンシブ」などと入力して検索してみると、
色々違った対応方法があるのですが、なかなか思うような感じではありません。

それでも、「簡単に見栄えよく。」の条件を満たす方法を探してみると、
ちょうど思っているようなぴったりの対応方法を見つけることができました。

それがこちらのサイト。

自分の表も横6列なので、CSSのソースもほとんどコピーできそうです。

ということで、やってみると本当に手間をかけず、
シンプルかつ見栄えのよい表ができました。
iPhon5のような幅の狭い、細長い画面でも大丈夫です。

SIRIUSのときから表作成には悩まされてきましたが、
今後はこのやり方でいこうと思います。