tableタグで横スクロールと自動改行を両立させる方法（ScrollHint付き）

この記事では「tableタグで横スクロールと自動改行を両立させる方法」について、コード例と解説を備忘目的を兼ねて共有したいと思います。

ここが問題でした

一般的に、tableを横スクロールするためには、「white-space: nowrap」により改行を禁止する必要があります。しかし、この方法では、備考欄など長い文章がtable内に含まれる場合、右方向に延々と続く表になってしまいます。

そういうわけで、わたしも長らく、「横スクロールと自動改行は両立できない」と思い込んできたのですが、コードと数時間格闘した結果、なんとか実用的な解決策が見つかりましたので、備忘を兼ねて共有したいと思います。

ちなみに、「きれいな」CSSコードの書き方を習得したい方には、定評のある「教科書」シリーズをお勧めします。数ある技術書の中で評価の高い一冊です。

Web制作者のためのCSS設計の教科書モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ

インプレス 2014-07-24

基礎から：★★★★★

Amazon

楽天

Yahoo!ショッピング

コード例と解説

ではさっそく、CSSのコード例から。

.table-scroll {
overflow: auto;
}
.table-scroll table {
table-layout: fixed;
}

ここでは、tableタグ全体を囲む<div>要素のclassを設定しています。

この記事をご覧いただいている方であれば、overflow: autoは説明不要かと思います。一般的にはこれとwhite-space: nowrapを組み合わせて横スクロールさせます。table内の文章を改行禁止にすることで、強制的に横スクロール化させてしまう仕組みです。

さらに、tableタグにtable-layout: fixedを設定します。この設定が今回のTipsのキモの部分で、tableの横幅を固定します。これにより、改行禁止にしなくても、指定したtableの横幅が画面の表示領域を超えれば、横スクロールになります。

続いて、HTMLのコード例です。

<div class="table-scroll">
<table style="width:1500px"><tbody><tr>
<th width="200px"></th>
<th width="1300px"></th>
</tr>
<tr>
<td></td>
<td></td>
</tr></tbody></table>
</div>

まずは、CSSで設定した<div class="table-scroll">でtableタグを囲みます。

続いて、tableタグの横幅を固定します。この次に説明する各カラムの横幅の合計と一致させておいてください。

最後に、各カラムごとの横幅を固定します。ここで指定する横幅の合計値が画面の表示領域を超えると、画面上で表が横スクロールします。@media screenを使わなくても、PCとスマホでそれぞれの表示領域に合わせ、別々の動きをするので便利ですよ。

表示例

上記コードの<th>と<td>タグの中に、適当にテキストを打ち込んでみました。

年号	出来事
1185（寿永4年）	寿永2年（1183年）7月、源義仲に敗れた平氏は安徳天皇と三種の神器を奉じて都を落ち、九州大宰府まで逃れたが、在地の武士たちが抵抗してここからも追われてしまった。平氏はしばらく船で流浪していたが、阿波国の田口成良に迎えられて讃岐国屋島に本拠を置くことができた。寿永3年（1184年）1月20日、鎌倉の源頼朝と義仲の抗争が起き、義仲は滅びた（宇治川の戦い）。その間に平氏は義仲に奪われた失地を回復し、勢力を立て直して摂津国福原まで進出する。しかし、頼朝の弟の範頼・義経に攻められて大敗を喫した（一ノ谷の戦い）。この戦いで平氏は一門の多くを失う大打撃を蒙った。出典：Wikipedia

年号

出来事

1185（寿永4年）

寿永2年（1183年）7月、源義仲に敗れた平氏は安徳天皇と三種の神器を奉じて都を落ち、九州大宰府まで逃れたが、在地の武士たちが抵抗してここからも追われてしまった。平氏はしばらく船で流浪していたが、阿波国の田口成良に迎えられて讃岐国屋島に本拠を置くことができた。寿永3年（1184年）1月20日、鎌倉の源頼朝と義仲の抗争が起き、義仲は滅びた（宇治川の戦い）。その間に平氏は義仲に奪われた失地を回復し、勢力を立て直して摂津国福原まで進出する。しかし、頼朝の弟の範頼・義経に攻められて大敗を喫した（一ノ谷の戦い）。この戦いで平氏は一門の多くを失う大打撃を蒙った。出典：Wikipedia

ここでは横幅を1500pxに指定しているので、PCでもスマホでも横スクロールになっていると思います。横幅700pxくらいだと、PCでは横スク無し、スマホでは横スクロール、というようなコントロールも可能です。

ScrollHintの設定

ここからはオマケです。tableを横スクロールにした場合、サイト閲覧者にも「この箇所は横スクロールするよ！」と教えたほうが親切です。たまたま表示領域の右端に縦罫線が表示される場合、横スクロールに気づかない人がいるかもしれません。

表示例（これは便利！）

年号	出来事
1185（寿永4年）	寿永2年（1183年）7月、源義仲に敗れた平氏は安徳天皇と三種の神器を奉じて都を落ち、九州大宰府まで逃れたが、在地の武士たちが抵抗してここからも追われてしまった。平氏はしばらく船で流浪していたが、阿波国の田口成良に迎えられて讃岐国屋島に本拠を置くことができた。寿永3年（1184年）1月20日、鎌倉の源頼朝と義仲の抗争が起き、義仲は滅びた（宇治川の戦い）。その間に平氏は義仲に奪われた失地を回復し、勢力を立て直して摂津国福原まで進出する。しかし、頼朝の弟の範頼・義経に攻められて大敗を喫した（一ノ谷の戦い）。この戦いで平氏は一門の多くを失う大打撃を蒙った。出典：Wikipedia

年号

出来事

1185（寿永4年）

そこで便利なのがScrollHint（スクロールヒント）です。下記のコードを<head>内に書き加えるだけで、横スクロールの案内表示を出すことができます。

<link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function(){
new ScrollHint('.js-scrollable', {
remainingTime: 2700,
i18n: {
scrollable: 'スクロールします'
}
});
});
</script>