テーブルのヘッダとボディの幅がズレルのを防ぐ

ヘッダとボディの幅を可変にし、かつズレないようにするにはどうすればよいのでしょうか？

No.2 ベストアンサー 回答者： ORUKA1951 回答日時： 2012/06/16 19:43

＞ヘッダを固定してボディのみスクロールするため、CSSでthead の tr と、tbody に float:left; を指定しているからです。

　floatの用途を間違えています。
　floatは本来、テキスト中に挿絵などがあるとき、その要素をフローとさせて、その周囲にテキストを回りこませるためのものです。floatでブロックを並べるテクニックは、確かによく見かける手法ですが、そのために文書構造を変えなければならない----floatさせる要素は回り込む要素の前に書かなければならない---という重大な問題があります。これはHTMLやスタイルシートの目的とかけ離れています。使うならabsoluteでしょう。

　しかし、floatやabsolute、fixedは、他の要素から完全に切り離されますから、列のセル幅を引き継げません。tableの描画ルーチンに従わなくなります。

　もう一点、tableの扱いはブラウザごとに大きな差があります。また根本的な問題として、tableには他のブロック要素に使えるプロパティが使えません。height/overflowなど・・

　そのような表を作成される場合は、table,thead,tfoot,tr,tdの各要素をblock要素に置き換えて、幅をセルごとにきちんと指定して配置するのが無難です。

＿<table class="scroll" summary="scrollTbody">
＿＿<thead>
＿＿＿<tr>
＿＿＿＿<th>あ行</th><th>か行</th><th>さ行</th><th>た行</th>
＿＿＿</tr>
＿＿</thead>
＿＿<tbody>
＿＿＿<tr>
＿＿＿＿<td>あ</td><td>か</td><td>さ</td><td>た</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>あ</td><td>か</td><td>さ</td><td>た</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>い</td><td>き</td><td>し</td><td>ち</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>う</td><td>く</td><td>す</td><td>つ</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>え</td><td>け</td><td>せ</td><td>て</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>お</td><td>こ</td><td>そ</td><td>と</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>あ</td><td>か</td><td>さ</td><td>た</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>い</td><td>き</td><td>し</td><td>ち</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>う</td><td>く</td><td>す</td><td>つ</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>え</td><td>け</td><td>せ</td><td>て</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>お</td><td>こ</td><td>そ</td><td>と</td>
＿＿＿</tr>
＿＿</tbody>
＿</table>
に対して
table.scroll,table.scroll *{display:block;margin: 0;padding:0;line-height:30px;}
table.scroll{width:428px;margin-top:50px;border-bottom:1px solid gray;}
table.scroll thead,table.scroll tbody{width:100%;border:none;}
table.scroll tbody{height:94px;overflow:auto;width:428px;}
table.scroll thead th,table.scroll tbody td{float:left;width:100px;border:solid gray 1px;}
/* 本来はfloatではなくdisplay:inline-blockとすべきだが後方互換のためやむなくfloat */
table.scroll tbody,table.scroll tbody tr{clear:left;}

この回答へのお礼

ご回答頂き、ありがとう御座います。

お礼日時：2012/06/27 11:48

No.1 回答者： ORUKA1951 回答日時： 2012/06/14 23:48

なぜずれるのですか?

<table summary="sample">
　<caption>テーブルヘッダ、フッタ、本文</caption>
　<thead><!-- ヘッダ -->
　　<tr>
　　　<th abbr="number">No.</th><th abbr="code">code</th>・・・・・・・・</th>
　　</tr>
　</thead>
　<tfoot>
　　<tr>
　　　<th abbr="number">No.</th><th abbr="code">code</th>・・・・・・・・</th>
　　</tr>
　</tfoot>
　<tbody>
　　<tr>
　　　<td>0001</td><td>feko-001</td>・・・・・</td>
　　</tr>
　　<tr>
　　　<td>0001</td><td>feko-001</td>・・・・・</td>
　　</tr>
　　<tr>
　　　<td>0001</td><td>feko-001</td>・・・・・</td>
　　</tr>
　</tbody>
</table>

この回答への補足

テーブルのスクロール時、ヘッダを固定してボディのみスクロールするため、CSSでthead の tr と、tbody に float:left; を指定しているからです。

補足日時：2012/06/15 08:39

この回答へのお礼

ご回答頂き、ありがとうございます。

お礼日時：2012/06/15 08:37