No.2ベストアンサー
- 回答日時:
>ヘッダを固定してボディのみスクロールするため、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;}
No.1
- 回答日時:
なぜずれるのですか?
<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お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
教えて!gooグレードポイントがdポイントに変わります!
dアカウント連携を行っていただくと、グレードに応じて「dポイント」が進呈されるようになります。
-
テーブルの表示がずれます
HTML・CSS
-
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
tableの位置がIEとその他ブラウザでずれる
HTML・CSS
-
4
同じ幅指定のつもりなのに、ブラウザによって違ってしまう現象
HTML・CSS
-
5
<table>の<thead>をposition:fixed;にすると<td>の幅がリセットされる
HTML・CSS
-
6
<form <input type=text"の枠を消せますか?"
HTML・CSS
-
7
スクロールバーの表示位置を変えたい
JavaScript
-
8
htmlでテーブル内にテキストボックスを作りたいのですが・・・
HTML・CSS
-
9
テーブルの任意の列を非表示にしたい
HTML・CSS
-
10
テーブルの行の高さを指定する時全てのtdタグに?
HTML・CSS
-
11
FireFoxのhtmlでtheadとtbodyの枠の位置が合わないのは何故か
HTML・CSS
-
12
テーブルの一部分のセルだけにスクロールバーを付けたいのですが、うまくいきません。
HTML・CSS
-
13
複数のボタンを等間隔に、かつ中央に配置する
HTML・CSS
-
14
<th>タグを使っても太字にしない方法は
HTML・CSS
-
15
HTMLでテーブルを横に並べる方法
インターネット広告・アフィリエイト
-
16
javascriptでセッションを取得
JavaScript
-
17
テーブルをスクロールさせるときのスクロールの位置
HTML・CSS
-
18
window.Openをモーダルにできますか?
JavaScript
-
19
行ごとにセルの幅を変えたい
ASP・SaaS
-
20
ウィンドウのサイズを変えても表示を崩れないようにしたい
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
人気Q&Aランキング
-
4
width指定したTDでwhite-space:...
-
5
テーブルのヘッダとボディの幅...
-
6
HTMLで文とテーブルの間が空く。
-
7
中に<table></table>が使えるア...
-
8
テーブルの任意の列を非表示に...
-
9
文字列が入っているtdを削除せ...
-
10
テーブルの表示がずれます
-
11
選択行だけ色を変更する場合のC...
-
12
HTMLで外部ファイルの読み込み
-
13
tableにul,または,olを入れられ...
-
14
ホームページ 表の上の余白を...
-
15
テーブルの外側の線を消す
-
16
スタイルシートで colspan=3と...
-
17
逆L字の表(table)組み
-
18
表の中の列の順番を入れ替える...
-
19
HTMLでアンケートの作り方を教...
-
20
テーブルタグの横に文章が入ら...
おすすめ情報
公式facebook
公式twitter