賢威7 – たった1行加えるだけでスクロールテーブルに幸せがやってくる！

レスポンシブデザインや表示幅の狭いスマホ・タブレットで、テーブルを綺麗に表示させるのは悩みの種ですよね。

賢威7.0に実装されているテーブル

まず賢威7.0を使っている方で、テーブルレイアウトが実装されている事に、気づいてない方も多いんじゃないでしょうか？実は、あるんです・・・。

賢威7.0には標準テーブル（スクロール）と比較用テーブルの2種類が実装されています。ここでは標準テーブルを例に挙げて説明します。

/*標準テーブル*/
<div class="table-scroll">
<table style="width: 500px;">
<thead>
<tr>
<th>項目名</th>
<th>項目名</th>
<th>項目名</th>
</tr>
</thead>
<tbody>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
</tbody>
</table><!--標準のテーブル-->
</div>

/*比較用テーブル*/
<table class="table-comparison">
<thead>
<tr>
<th class="w25"></th>
<th class="w25">項目内容</th>
<th class="highlight w25"><span class="f12em">項目内容</span></th>
<th class="w25">項目内容</th>
</tr>
</thead>
<tfoot>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>
</tr>
</tbody>
</table>

標準テーブルと比較用テーブルのコードです。例に挙げる標準テーブルは<table style=”width: 500px;”>で幅が500pxに指定されていますが、これを<table>にするとコンテンツ幅いっぱいのテーブルになります。

標準テーブルと比較用テーブルのサンプルデモをご覧になりたい方はこちらで確認をして下さい。

標準スクロールテーブルの問題点

説明するより見た方が早いと思うので、テーブルの表示確認をしてみましょう。

デスクトップPC表示（width:500px）

デスクトップPC表示（width:指定なし）

普通のテーブルレイアウトですね。ですが、賢威を使う方はアフィリエイトや商用利用されている方が多いと思います。

製品レビューや料金表などをテーブルレイアウトで作る時はカラム（列）が当然増えてきますから、その場合の表示を確認してみます。

カラム数の多いデスクトップPC表示（width:500px）

カラム数の多いデスクトップPC表示（width:指定なし）

もう小学校の時間割りを思い出します。この時点でスクロール表示してくれ・・・と思うのですけどね。しかもここでは「項目内容」の4文字ですけど、実際は4文字じゃ終わらないですよね。

スマホ表示（width:500px）

スマホ表示（width指定なし）

スクロール表示にも関わらず、カラムが多いと縦書きのテーブルのようです。見やすくするためにテーブルレイアウトをしたのに、逆に見づらくなっています。

このような賢威7.0のテーブルレイアウトに1行加えるだけで、劇的に見やすいスクロールテーブルにしてみましょう。

CSSに「white-spaceプロパティ」を1行加える

.table-scroll{
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

テーブルを囲っている<div class=”table-scroll”>のCSSにwhite-spaceプロパティを追加します。

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

white-spaceは半角スペースやタブ、改行の表示方法を指定する際に使うプロパティです。値には自動的に改行されない「nowrap」を指定してあげます。

white-spaceプロパティの値について

normal
ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示します。ボックスの大きさが指定されている場合には、その大きさに応じて自動的に改行されます。

pre
ソース中の連続する半角スペース・タブ・改行を、そのまま表示します。

nowrap
ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示します。ボックスの大きさが指定されている場合にも、自動的に改行されません。

引用元: スタイルシートリファレンス

上記までは画像を使用していましたが、white-spaceプロパティを追加した実際のテーブルレイアウトの表示を確認してみましょう。

3カラムの標準スクロールテーブル（width:500px）

カラム数の多い標準スクロールテーブル（width指定なし）

自動的に改行されないスクロールテーブルになりました・・・よね？スマホ表示の方が分かりやすいと思うので、そちらでも確認してみて下さい。

おまけ

ブラウザ幅736px以下でテーブルレイアウトを表示した場合に、賢威7.0のテーブルは自動的に「※はみ出ている場合、横にスクロールできます。」とテーブル上部に表示されます。

@media
only screen and (max-width : 736px) {

	.table-scroll:before {
		content: "※はみ出ている場合、横にスクロールできます。"
	}
}

これはデバイスごとにCSSを振り分けるMedia Queriesで指定されており、賢威7.0では「rwd.css」に格納されてます。

そして解像度736px以下（max-width:736px）の時にcontentプロパティで表示されるようになってます。

@media
only screen and (max-width : 736px) {

	.table-scroll:before {
		content: none;
	}
}

表示を削除したい場合は「none」に書き換えましょう。

@media
only screen and (max-width : 736px) {

	.table-scroll:after {
		content: "※はみ出ている場合、横にスクロールできます。"
	}
}

テーブル下部に表示したい場合は、擬似要素を「:after」に書き換えましょう。

MATO-MEMO

たった1行加えるだけで、賢威7.0のテーブルが見違えるようになりましたね。しかし、項目内容が多くなれば横スクロールが長くなるし・・・完璧なテーブルレイアウトはないものでしょうか。

今後、CSSの進化と共に「これは！！」というものがみつかったら、また紹介したいと思います。テーブルに変わる新しいモノが生まれたり・・・。

賢威以外のテーマを使用していて、スクロールテーブルを実装してみたい方はこちらを参考にしてみて下さいね。非常に分かりやすく解説して下さっています。

スマートフォン表示で、はみ出したtableを横スクロールさせるためのCSS | Webコミュ