22 – tetsuyanbo

HTML5標準で対応してくれればいいのに...なんて事言ってても始まらないので、やってみる。 まず、普通にテーブルを書くとこんな感じに表示される。 ポイントはCSSの定義っぽい。 今回気をつけたところはこんな感じ。 tableの幅を固定する(widthを指定する) theadを左寄せにする(floatをleftに指定する) theadではみ出た部分は非表示にする(overflowをhiddenに指定する) tbodyを左寄せにする(floatをleftに指定する) tbodyではみ出た部分があったらスクロールを表示する(overflowをautoに指定する) tbodyの幅を固定する(widthを指定する) tbodyの高さを固定する(heightを指定する) 行の幅を固定する(thをtdのwidthが合うように指定する) HTMLのコードはこんな感じ。 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;style type="text/css"&gt; table { border-collapse: collapse; width: 160px; /* ポイント */ } thead { float: left; /* ポイント */ overflow: hidden; /* ポイント */ } tbody { float: left; /* ポイント */ overflow: auto; /* ポイント */ height: 100px; /* ポイント */ width:160px; /* ポイント */ } th, td { border: 1px solid gray; width: 30px; /* ポイント */ } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;no&lt;/th&gt; &lt;th&gt;R&lt;/th&gt; &lt;th&gt;G&lt;/th&gt; &lt;th&gt;B&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr style="background-color:#ff0000;"&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;ff&lt;/td&gt; &lt;td&gt;00&lt;/td&gt; &lt;td&gt;00&lt;/td&gt; &lt;/tr&gt; &lt;tr style="background-color:#00ff00;"&gt; &lt;td&gt;2&lt;/td&gt; &lt;td&gt;00&lt;/td&gt; &lt;td&gt;ff&lt;/td&gt; &lt;td&gt;00&lt;/td&gt; &lt;/tr&gt; &lt;tr style="background-color:#0000ff;"&gt; &lt;td&gt;3&lt;/td&gt; &lt;td&gt;00&lt;/td&gt; &lt;td&gt;00&lt;/td&gt; &lt;td&gt;ff&lt;/td&gt; &lt;/tr&gt; &lt;tr style="background-color:#ffff00;"&gt; &lt;td&gt;4&lt;/td&gt; &lt;td&gt;ff&lt;/td&gt; &lt;td&gt;ff&lt;/td&gt; &lt;td&gt;00&lt;/td&gt; &lt;/tr&gt; &lt;tr style="background-color:#ff00ff;"&gt; &lt;td&gt;5&lt;/td&gt; &lt;td&gt;ff&lt;/td&gt; &lt;td&gt;00&lt;/td&gt; &lt;td&gt;ff&lt;/td&gt; &lt;/tr&gt; &lt;tr style="background-color:#00ffff;"&gt; &lt;td&gt;6&lt;/td&gt; &lt;td&gt;00&lt;/td&gt; &lt;td&gt;ff&lt;/td&gt; &lt;td&gt;ff&lt;/td&gt; &lt;/tr&gt; &lt;tr style="background-color:#ffffff;"&gt; &lt;td&gt;7&lt;/td&gt; &lt;td&gt;ff&lt;/td&gt; &lt;td&gt;ff&lt;/td&gt; &lt;td&gt;ff&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; 実行してみるとこんな感じ。 下の方までスクロールさせるとこんな感じ。 初期状態でtheadの下側の枠線とtbodyの上型の枠線がかぶって表示されるので、枠線が太く表示されちゃうのがとっても気になる...。 この辺はCSSをいじってなんとかするところなのかなぁ...。 あと、動作を確認したのはFirefox 22のみ。 いつもHTMLの解釈で話題になるIEは動作の確認はしてないのであしからず...。 まま、明日への自分へのメモってことで。

22

html5メモ Excelのウィンドウ枠固定っぽくテーブルの見出しを固定してみる

Mac OSXでFirefox22にアップデートしてみる