私は表を見やすく作成してくれるTablePressというプラグインを使用しています。
しかし、スマホで見た場合やパソコンのブラウザで見た時に幅を狭めると文字が勝手に折り返してしまい見にくくなってしまうので、解消する手順についてまとめました。
事象の確認
Safariで横幅を縮めてみると、勝手に折り返してしまいます。
下記の表だと、SNSや所属グループ、生年月日の欄は折り返さないのに名前やパートは見事に縦表示になっています。
項目によって折り返しされたり、されなかったり、何故なのでしょうか。。
検証：幅の指定と水平スクロールを設定
設定内容
TablePressでは表を表示したい場所にショートコードを貼り付けています。
その際に各項目の幅を設定出来るので幅を固定し、また項目が長くなった際に水平スクロールが出現するように設定する方法で試して見ます。
まずショートコードを設定している箇所に固定幅を指定します。
“table id=XX column_widths=”200px|200px|200px|200px|200px|200px” /”
※XXは対応するテーブルIDに変更
次にTablePressの設定画面で水平スクロールチェックONに変更します。
管理画面→TablePress→対象のテーブルを選択して、
結果
やはり勝手に折り返してしまいます、、
デベロッパーツールで確認してみると、ヘッダにWidthが勝手に追加されており、自分で設定した幅が効いていないようです。
また、よく確認してみるとヘッダと中身のテーブルが別々になっています。
他の表だと１つのテーブルで構成されているのに何故、この表だけ別々のテーブルになっているのでしょうか。
１つのテーブルで構成された表と今回の表のTablePressのプロパティを比較したところ、水平スクロールをチェックONした事が原因のようです。
この機能をチェックONにすると、ヘッダと中身でテーブルが別々になってしまうので個別でCSSを設定して幅の調整していたりするとヘッダと中身がずれるので注意が必要です。
最終的な設定内容
この後も試行錯誤に時間を費やしましたが、最終的には拡張プラグインを導入し、個別CSSを追加する事で落ち着きました。
横スクロールの設定
まず、横スクロールに関してはTablePressの水平スクロールプロパティは使用せず(ヘッダと中身のテーブルが分かれてしまうため)、レシポンシブルのための拡張プラグインを追加します。
Responsive Tables | TablePress
上記のリンクから、Download:Responsive Tables Extension をダウンロードして、インストール&有効化させます。
Zipファイルからプラグインを追加する方法については、この記事では省略します。
ショートコードの設定方法を”table id=XX responsive=scroll/”に変更する事で横スクロールが表示されるようになります。
また上記の検証で設定した、TablePressの水平スクロールを有効にした場合は、チェックを外してください。
折り返さないための設定
文字列を折り返さないためには、テーブルの構成されている各要素に折り返さないように設定する必要があります。
HTMLのテーブルは<td>と<th>タグで構成されているのですが、この要素に折り返さないでねと設定する事で解決してみたいと思います。
TablePressの管理画面にはプラグインのオプションというタブがあり、その中にカスタムCSSを追加する事ができます。
その中に下記のコードを追加してください。
|
1 2 3 4 |
th, td { white-space: nowrap; } |
white-spaceは要素内のホワイトスペースをどのように扱うかを指定できるのですが、nowrapを設定する事で折り返しを行わなくなります。
まとめ
とても手間取りましたが、無事折り返さず、横スクロールが出るように設定できました。
こんな事に１日も工数を費やして勿体無いと思いますが、自分がこだわりたい箇所に時間を費やせるというのはとても楽しくてやりがいがあります。