CSS - スクロール可能なテーブル w/o JavaScript

これ、うまく行ったのはfirefoxだけでした。

スクロール可能なテーブルを作成するJavaScriptライブラリ「ScrollableTable」:phpspot開発日誌

スクロール可能なテーブルを作成するJavaScriptライブラリ「ScrollableTable」。 次のようなスクロールしてもカラム名が消えず、小さいスペースで配置できるテーブルを作成できます。

• DEMO: Scrollable HTML table

Safariではスクロールバーそのものが表示されず、OperaではTableが丸ごと消えてしまいます。

そもそもこれならCSSだけで出来るのではということで試作してみたのが以下です。

Firefox, Safari, Operaではきちんと表示されます。IE5では横スクロールが表示されましたが、それ以外は当初の目的を満たしています。

	日本語	中文	English

0	ぜろ	零	zero
1	いち	一	one
2	に	二	two
3	さん	三	three
4	し	四	four
5	ご	五	five
6	ろく	六	six
7	なな	七	seven
8	はち	八	eight
9	きゅう	九	nine
10	じゅう	十	ten

	日本語	中文	English

詳しくは末尾のソースをご覧頂くとして、要点をまとめると、

1. 本来一つのtableで表示するところを、三つのtableに分ける
2. table一つ一つをdivで囲む
3. 上下のdivには、thead,tfootに対応するtableをおく
4. 真ん中のdivに、tbodyに対応するtableを置き、scrollの設定はdivで行う
5. 上中下の各table内のtd,thは、一番右の要素を除いてwidthを指定する

この「一番右の要素を除いて」というところがミソです。

それにしても、CSSはJavaScript以上にブラウザー依存が激しくて大変です。デザイナーのみなさんはほんとすごいと思います。

Enjoy!

Dan the CSSphobia

HTML Source:

<style>
#scrollable th,td{ border: outset 1px; }
</style>

<div id="scrollable" style="width:320"><!-- table -->

<div style="margin:0;padding:0"><table width="100%"><!-- thead -->
<thead>
<tr style="text-align:left"><th width="32"></th><th width="64">日本語</th><th width="64">中文<th>English</th></tr>
</thead>
<tbody></tbody>
</table>
</div>
<div style="height:100px; overflow:auto"><table width="100%"><!-- thead -->
<tbody>
<tr><th width="32">0</th><td width="64">ぜろ</td><td width="64">零</td><td>zero</td></tr>
<tr><th>1</th><td>いち</td><td>一</td><td>one</td></tr>
<tr><th>2</th><td>に</td><td>二</td><td>two</td></tr>
<tr><th>3</th><td>さん</td><td>三</td><td>three</td></tr>
<tr><th>4</th><td>し</td><td>四</td><td>four</td></tr>
<tr><th>5</th><td>ご</td><td>五</td><td>five</td></tr>
<tr><th>6</th><td>ろく</td><td>六</td><td>six</td></tr>
<tr><th>7</th><td>なな</td><td>七</td><td>seven</td></tr>
<tr><th>8</th><td>はち</td><td>八</td><td>eight</td></tr>
<tr><th>9</th><td>きゅう</td><td>九</td><td>nine</td></tr>
<tr><th>10</th><td>じゅう</td><td>十</td><td>ten</td></tr>
</tbody>
</table></div>
<div style="margin:0;padding:0"><table width="100%"><!-- tfoot -->
<tbody></tbody>
<tfoot>
<tr style="text-align:left"><th width="32"></th><th width="64">日本語</th><th width="64">中文<th>English</th></tr>
</tfoot>
</table></div><!-- tfoot -->

</div><!-- /table -->

Comments

いいですね。と思って手元で試すと、なかなか難しいです。
テーブルを三つにわけているので、セル内の文字数が変わるとヘッダ・フッタとずれてみたり。IEでは、ですが。（そこを気合いでpxであわせるのがWEBデザイナ様？でもシステム埋め込みとかではぞっとする）
いい加減、何とかならないんでしょうかね、このブラウザでの無駄な苦労ｗ。

あと、
<div id="scrollable" style="width:320"><!-- table -->
は
<div id="scrollable" style="width:320px"><!-- table -->
がCSSとしては正しいでしょうか。この違いでもだいぶ挙動（表示）が変わりそうです。

Posted by souto at 2007年03月16日 20:41

thead, tbody, tfootをブラウザがうまい具合に処理してくれるといいんですけどね。
ん？JavaScriptでDanさんのに書き換えればいいのか！

Posted by aoix at 2007年03月17日 01:19