(O+P)ut

OutPut Log by SE in SIer



(O+P)ut

Output Log by SE

【はてなブログ】表がはみ出す場合にスクロール機能をつける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>

で囲めばオッケーです。

使用例

table-scタグで挟まない場合
A B C D
1 収入 利益 補足
2 2000 =INDIRECT(A2&"!A2") =INDIRECT(B2&"!B2") INDIRECT関数を利用することで別シートの値を取得している
3 2001 =INDIRECT(A3&"!A2") =INDIRECT(B3&"!B2") 同上
table-scタグで挟んだ場合

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>

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

以下のコードは

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

終わりに

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


他の記事を読む