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で質問しましょう!
似たような質問が見つかりました
- JavaScript JSON について 1 2022/06/09 18:17
- 国産車 車でボディを割と激しめに擦ってしまい 凹んでしまいました。ボディの色が特殊でこれは 結構時間かかるし 10 2022/09/22 12:26
- カスタマイズ(車) 車の根幹は何なのでしょうか?ボディですか?ボディ以外は好きに変えても倫理的に問題はありませんか? 9 2022/08/04 23:42
- 車検・修理・メンテナンス オールペンでのドア内側の塗装 3 2022/04/20 17:45
- Access(アクセス) AccessVBAで降順にするテーブル作成クエリを使用して作成したテーブルを削除し同一のテーブル作成 1 2023/01/06 11:17
- 国産車 cx5の樹脂の部分をボディ同色にすることはできますか? パーツをはずして新しいボディ同色のパーツをつ 4 2022/10/16 22:20
- 一眼レフカメラ α7R4のメモリー機能 1 2022/05/29 19:59
- ダイエット・食事制限 スリーサイズを変えずに増量するのは可能ですか 生理が止まって最悪増量しなきゃいけないみたいです 今は 3 2023/02/22 23:01
- その他(悩み相談・人生相談) 144cm80kgのハリのあるボディか、144cm80kgから40kg痩せて40kgになったたるった 3 2022/07/31 20:10
- その他(芸能人・有名人) グラビアアイドルとか好きでお尻がキュートとかボディがセクシーとかくびれとか好きとか言ってる女って自分 1 2023/05/16 14:06
このQ&Aを見た人はこんなQ&Aも見ています
-
「どうして捨てられないの?」前妻の物を捨てられない男性の心理って?
前妻の物を捨てられない理由に加え、捨てるための手段はあるのかを専門家に聞いてみた!
-
テーブルの表示がずれます
HTML・CSS
-
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
テーブルの一部分のセルだけにスクロールバーを付けたいのですが、うまくいきません。
HTML・CSS
-
-
4
テーブルの位置を細かく指定したい。
HTML・CSS
-
5
ウィンドウのサイズを変えても表示を崩れないようにしたい
HTML・CSS
-
6
Javascriptの値をJava(JSP)へ渡す方法
Java
-
7
onchangeイベントを強制的に発生させる
JavaScript
-
8
カンマ区切りのCSVファイルから"を削除したい
その他(プログラミング・Web制作)
-
9
html でのテキスト結合について
その他(プログラミング・Web制作)
-
10
チェックボックス付きのテーブルから、チェックの付いた行のみの値を取得したい
JavaScript
-
11
INSERT文でフィールドの1つだけを他のテーブルから取ってきた値を入れたい
その他(データベース)
-
12
複数のsubmitボタンで押されたボタンを取得する方法
JavaScript
-
13
SQLで特定の項目の重複のみを排除した全項目を取得する方法
その他(プログラミング・Web制作)
-
14
BASE64のエンコード時のサイズについて
Outlook(アウトルック)
-
15
timestampのデータはどのようにして入力
PostgreSQL
-
16
yyyymmddからyyyy/mm/ddへの変換
Java
-
17
CASE文のエラーについて
Oracle
-
18
異なるスキーマからデータを抽出するには?oracl、PL/SQL
Oracle
-
19
文字の横にプルダウンを表示させたいのですが、どうすればいいでしょうか?
HTML・CSS
-
20
count(1)とcount(*)の違い
Oracle
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
テーブルを2つ横に並べる
-
cssで、表示されるテキストによ...
-
TRタグの余白をcssで設定するには
-
tableタグ内で、空白セルでも罫...
-
テーブルのヘッダとボディの幅...
-
nth-childをtrとtdに同時に使う...
-
<table>の<thead>をposition:fi...
-
テーブルの行の高さを指定する...
-
テーブルの任意の列を非表示に...
-
中に<table></table>が使えるア...
-
tdなどの閉じタグは省略しても...
-
テーブルのセルに画像をピッタ...
-
テーブルの外側の線を消す
-
tableの要素(tr、td)に一...
-
テーブルの装飾
-
HTML <td></td>タグ セル内余...
-
width指定したTDでwhite-space:...
-
テーブルをスクロールさせると...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
テーブルの任意の列を非表示に...
-
TRタグの余白をcssで設定するには
-
テーブルのヘッダとボディの幅...
-
cssで、表示されるテキストによ...
-
テーブルのセルに画像をピッタ...
-
文字列が入っているtdを削除せ...
-
逆L字の表(table)組み
-
テーブルの表示がずれます
-
HTML <td></td>タグ セル内余...
-
HTMLのテーブルで桁をそろ...
-
中に<table></table>が使えるア...
-
スタイルシートで colspan=3と...
-
htmlのtable内に画像
-
ホームページ 表の上の余白を...
-
テーブルタグのセルの幅の一部...
-
テーブルの行の高さを指定する...
-
CSSだけで<table>の<td>や<tr>...
-
EXCELからhtmlへの変換で罫線が...
おすすめ情報