「アフィンガー5」のテーブル（横スクロール機能）の表示方法を改善してみた ／ AFFINGER5 カスタマイズ

このブログのWordPressテーマは「アフィンガー5」を使っています。色々機能があるうえ、今風のブログのデザインが簡単にできるのは感無量…！

WordPressテーマ「WING（AFFINGER5）」

表の横スクロール機能について

幅の広い表を横スクロールで表示させる方法

過去、HTMLサイトを作成中に表のレスポンシブ化でつまづき、もの凄く悩んだ経験があります。が、アフィンガー5では、簡単に横スクロール対応の表ができちゃうんですね。スゴイですよ！

その方法は、下のコードで表（tableタグ）を囲むだけ。

テキストエディタで、次のようなカタチになっていればOK！

アフィンガー5の初期値の表示と気になる点

標準では、下のような表ができあがります。ブラウザの幅を狭くすれば、横にスクロールすることを確認できますね。

クマ

超簡単！

ぽん

あれ？でも長い文章を入れると、その列だけやたら横長になっちゃうよ～！

表の内容によっては、スマホで表示すると、セルがビヨーンと横長になってしまい、見づらくなってしまいます。こんな感じ。PCでも横長になっていますが、ブラウザの幅を狭くしてスマホ表示にしてみると、更に横長になります。

スマホ表示では、文章が自動改行されないように設定されているため、一箇所でも長い文章があると、その列はものすごく横長になってしまうんですね。（PCやタブレットでは自動改行されます。）

単語程度の文字数で作られている表であれば、改行しない仕様は大変見やすいかと思いますが、一長一短があるように思います。なので、これを解決してみました。

CSSへの追記 ＆ 表のセルの幅指定で改善

修正前と修正後の違いは下記の通り。

さっそく修正をしていきましょう！

step
1下の内容をコピペして、アフィンガー5のCSSに反映させる

セル内の文章を自動改行させる

white-space:nowrap を white-space:normal; に変更することにより、文章が自動改行されるようになります。

テーブルを固定レイアウトへ

テーブル（table）に table-layout: fixed; を設定することで、セル幅の指定が効くようになります。これがないと、指定しても無視されてしまいます。

step
2表のセル（td）に幅を "px" で指定する

上記のCSS（table-layout: fixed;）を使う場合、セルの幅を指定しないと横スクロールしません。少し面倒ですが、これにより細かい幅の調整が可能になります。

セルの幅は、表の一番上の行を表す tdタグ全てに設定すればOKです。（← 一番上の行じゃなくても大丈夫だけど、パッと見で一番上が分かりやすいかと。）なお、ブラウザの幅が広い場合は、セルは指定した以上の幅になりますが、狭くなっても指定した幅以下にはなりません。

実際のセルの幅の設定の仕方は下記をご参考に。td に style="width: ●●px;" を追記して設定します。

うまくいかない場合は、2行目の <table> を <table style="width: ●●px;（設定したセルの幅の合計）> と設定することで、動くようになるかも。また、自分で設定した以外のセルに幅の指定（style="width: ●●px;"）があったら、全て削除して下さい。

クマ

以上です！

表（テーブル）の挙動は、自分も未だにしっかりと分かっていません。幅を指定しても、めちゃ無視されるし！でも、今回調べてみた事で少しだけ理解できたかも。