【はてなブログ】表がはみ出す場合にスクロール機能をつけるCSS

はてなブログで「はてな記法」を使えば

|* |*A|*B|
|*1|売上|利益|
|*2|2000|300|

が

	A	B
1	売上	利益
2	2000	300

といったテーブル表になります。

パソコンの場合は画面幅が大きいのであまり表がはみ出すことはないですが、スマホから見た場合に表が見切れてしまう場合があります。
そんな際に使える便利なデザインCSSとそれの利用方法について解説しました。

デザインCSSに

#table-sc {
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
overflow: auto;
white-space: nowrap;
}

と追記し、記事内のテーブルを

<div id="table-sc"></div>

で囲めばオッケーです。

	A	B	C	D
1	年	収入	利益	補足
2	2000	=INDIRECT(A2&"!A2")	=INDIRECT(B2&"!B2")	INDIRECT関数を利用することで別シートの値を取得している
3	2001	=INDIRECT(A3&"!A2")	=INDIRECT(B3&"!B2")	同上

	A	B	C	D
1	年	収入	利益	補足
2	2000	=INDIRECT(A2&"!A2")	=INDIRECT(B2&"!B2")	INDIRECT関数を利用することで別シートの値を取得している
3	2001	=INDIRECT(A3&"!A2")	=INDIRECT(B3&"!B2")	同上

コードの解説ですが

#table-sc {
overflow-x: scroll;

この部分で

<div id="table-sc"></div>

に挟まれている部分をＸ軸方向にスクロール可能にしています。

以下のコードは

-webkit-overflow-scrolling: touch;

スクロールした際に慣性のような動きを与えるための一文です。不要であれば消してもスクロールは可能です。

以下の部分で折り返し表示でセルが縦に伸びるのを防いでいます。

overflow: auto;
white-space: nowrap;
}

このスクロール表、本来はすべての表に自動的に付与したいのですが
はてなブログでは以下のように表はHTML化されます。

<table>
    <tr>
    <th> </th>
    <th> A</th>
    <th> B</th>
    </tr>
    <tr>
    <th>1</th>
.....
</table>

要は、クラスがないためデザインCSSでデフォルトの表の装飾ができません。

同じくはてなブログではコードの表現方法がありますが

test

こちらは

<pre class="code" data-lang="" data-unlink>test</pre>

とclassが定義されてHTML化されるので、特別にタグで挟まずとも自動的にスクロール機能の付与ができます。
テーブルもこのように自動でタグ付けされるようにはてなブログの改変があれば明示的にタグで挟まずとも適用ができるようになります。

画面が小さいスマホで横に長い表を見る場合、スクロールで見たほうが表のバランスを崩すくとなく閲覧できます。
同様のことに興味がある方のご参考になれば幸いです。

(O+P)ut