下記のhtmlでtheadとtbodyの枠が合わないのは何故でしょうか。理由と修正個所の指摘をお願いします。文書のタイトル #table01 { border:solid 5px; } #table01HeadR { float:left; } #table01Body { float:left; height:200px; overflow:auto; } TABLE の見出しを固定したまま内容だけをスクロール対象にする」をスタイルシートで実現するサンプル date schedule 2015/1/1 今日は、運動会 2015/1/2 今日は、修学旅行 2015/1/3 今日は、卒業式 2015/1/4 今日は、体育の日 2015/1/5 今日は、葬式 2015/1/6 今日は、結婚式 2015/1/7 今日は、遠足の日 2015/1/8 今日は、夏祭り 2015/1/9 今日は、海の日 2015/1/10 今日は、山の日 2015/1/11 今日は、誕生日 2015/1/12 今日は、予定が無い

>htmlのイメージがわきません。htmlのソースをご提示願います。ちょっと雑ですがこんな感じ #t1,#t2{ border-collapse:collapse;} #t1 th,#t2 td{ border:1px solid #000000;} #t2d {height:200px; overflow:auto;} window.onload=function(){ var c1=document.getElementById("t1").getElementsByTagName("tr")[0].getElementsByTagName("th"); var c2=document.getElementById("t2").getElementsByTagName("tr")[0].getElementsByTagName("td"); for(var i=0;i w2)?w1:w2; c1[i].width=w; c2[i].width=w; } document.getElementById("t2d").style.width=(document.getElementById("t1").offsetWidth+20).toString()+"px"; } date schedule 2015/1/1 今日は、運動会 2015/1/2 今日は、修学旅行 2015/1/3 今日は、卒業式 2015/1/4 今日は、体育の日 2015/1/5 今日は、葬式 2015/1/6 今日は、結婚式 2015/1/7 今日は、遠足の日 2015/1/8 今日は、夏祭り 2015/1/9 今日は、海の日 2015/1/10 今日は、山の日 2015/1/11 今日は、誕生日 2015/1/12 今日は、予定が無い #t1,#t2{ border-collapse:collapse;} #t1 th,#t2 td{ border:1px solid #000000;} #t2d {height:200px; overflow:auto;} window.onload=function(){ var c1=document.getElementById("t1").getElementsByTagName("tr")[0].getElementsByTagName("th"); var c2=document.getElementById("t2").getElementsByTagName("tr")[0].getElementsByTagName("td"); for(var i=0;i w2)?w1:w2; c1[i].width=w; c2[i].width=w; } document.getElementById("t2d").style.width=(document.getElementById("t1").offsetWidth+20).toString()+"px"; } date schedule 2015/1/1 今日は、運動会 2015/1/2 今日は、修学旅行 2015/1/3 今日は、卒業式 2015/1/4 今日は、体育の日 2015/1/5 今日は、葬式 2015/1/6 今日は、結婚式 2015/1/7 今日は、遠足の日 2015/1/8 今日は、夏祭り 2015/1/9 今日は、海の日 2015/1/10 今日は、山の日 2015/1/11 今日は、誕生日 2015/1/12 今日は、予定が無い

急いでいます！

FireFoxのhtmlでtheadとtbodyの枠の位置が合わないのは何故か

解決済

質問者：usui-2015
質問日時：2015/09/27 20:57
回答数：5件

下記のhtmlでtheadとtbodyの枠が合わないのは何故でしょうか。
理由と修正個所の指摘をお願いします。
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset=sjis">
<title>文書のタイトル</title>
<style type = "text/css">
#table01 { border:solid 5px; }
#table01HeadR { float:left; }
#table01Body { float:left; height:200px; overflow:auto; }
</style>
</head>
<body>
TABLE の見出しを固定したまま内容だけをスクロール対象にする」をスタイルシートで実現するサンプル<br>

<table id = "table01">
<thead>
<tr id = "table01HeadR"> <th>date</th> <th>schedule</th> </tr>
</thead>
<tbody id = "table01Body">
<tr> <td>2015/1/1</td> <td>今日は、運動会</td> </tr>
<tr> <td>2015/1/2</td> <td>今日は、修学旅行</td> </tr>
<tr> <td>2015/1/3</td> <td>今日は、卒業式</td> </tr>
<tr> <td>2015/1/4</td> <td>今日は、体育の日</td> </tr>
<tr> <td>2015/1/5</td> <td>今日は、葬式</td> </tr>
<tr> <td>2015/1/6</td> <td>今日は、結婚式</td> </tr>
<tr> <td>2015/1/7</td> <td>今日は、遠足の日</td> </tr>
<tr> <td>2015/1/8</td> <td>今日は、夏祭り</td> </tr>
<tr> <td>2015/1/9</td> <td>今日は、海の日</td> </tr>
<tr> <td>2015/1/10</td> <td>今日は、山の日</td> </tr>
<tr> <td>2015/1/11</td> <td>今日は、誕生日</td> </tr>
<tr> <td>2015/1/12</td> <td>今日は、予定が無い</td> </tr>
</tbody>
</table>
</body>
</html>

これは多分に、theadとtbodyでそれぞれのtableを用意をすると言う事でしょうか。これに該当するかは分かりませんが。これに該当する物が下記のページに有りましたが。ここでは、theadとtbodyの枠がずれると言う事でピクセルを数値で指定をしています。すこし、めんどうですが。こう言う方法で無いとずれると言う事でしょうか。

http://k-hiura.cocolog-nifty.com/blog/2013/07/ta …

No.2の回答に寄せられた補足コメントです。補足日時：2015/09/28 14:39
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： yambejp
回答日時：2015/09/28 17:04

＞<col><col>はどう言う動作をするのでしょうか。

失礼しました
IEとFirefoxはcolを使って幅を調整できるので途中までそれで書いたのですが
chromeあたりがcolの幅を認識でないようだったのでthやtdの幅を直正読むことにしました

なのでこのソースに関してはcolはあまり意味がありません。
タグ自体削除しても問題ありません。

- 0
- 件

通報する

この回答へのお礼

大変に参考になりました。
今後の新しい啓発として頑張ります。

度々のご回答有難う御座いました。

通報する

お礼日時：2015/09/28 18:35

No.4

回答者： yambejp
回答日時：2015/09/28 16:03

＞styleは別としてscriptはどうしても必要なんでしょうか???

javascriptでお互いのセルの幅をみて、広い方に合わせています。
もとのご参考になさっているサイトのソースは無茶苦茶です。
scriptを書かないなら、幅を最初から決め打ちで値を指示してあげれば間違いありません。
ただ幅をしていすると改行したり余ったりするのでscriptで動的に調整しているわけです

- 0
- 件

通報する

この回答へのお礼

有難う御座います。分かりました。こう言う制御が必要なんですね

最後に<col><col>はどう言う動作をするのでしょうか。このタグを外しても見た目は変わりないのですが。何度も申し訳ありませんが、宜しくお願いします。

通報する

お礼日時：2015/09/28 16:15

No.3

回答者： yambejp
回答日時：2015/09/28 15:04

>htmlのイメージがわきません。

htmlのソースをご提示願います。

ちょっと雑ですがこんな感じ
<style>
#t1,#t2{ border-collapse:collapse;}
#t1 th,#t2 td{ border:1px solid #000000;}
#t2d {height:200px; overflow:auto;}
</style>
<script>
window.onload=function(){
var c1=document.getElementById("t1").getElementsByTagName("tr")[0].getElementsByTagName("th");
var c2=document.getElementById("t2").getElementsByTagName("tr")[0].getElementsByTagName("td");
for(var i=0;i<c1.length;i++){
var w1=c1[i].offsetWidth -2;
var w2=c2[i].offsetWidth -2;
var w=(w1>w2)?w1:w2;
c1[i].width=w;
c2[i].width=w;
}
document.getElementById("t2d").style.width=(document.getElementById("t1").offsetWidth+20).toString()+"px";
}
</script>
<table id = "t1">
<col><col>
<tbody>
<tr> <th>date</th> <th>schedule</th> </tr>
</tbody>
</table>
<div id="t2d">
<table id = "t2">
<col><col>
<tbody>
<tr> <td>2015/1/1</td> <td>今日は、運動会</td> </tr>
<tr> <td>2015/1/2</td> <td>今日は、修学旅行</td> </tr>
<tr> <td>2015/1/3</td> <td>今日は、卒業式</td> </tr>
<tr> <td>2015/1/4</td> <td>今日は、体育の日</td> </tr>
<tr> <td>2015/1/5</td> <td>今日は、葬式</td> </tr>
<tr> <td>2015/1/6</td> <td>今日は、結婚式</td> </tr>
<tr> <td>2015/1/7</td> <td>今日は、遠足の日</td> </tr>
<tr> <td>2015/1/8</td> <td>今日は、夏祭り</td> </tr>
<tr> <td>2015/1/9</td> <td>今日は、海の日</td> </tr>
<tr> <td>2015/1/10</td> <td>今日は、山の日</td> </tr>
<tr> <td>2015/1/11</td> <td>今日は、誕生日</td> </tr>
<tr> <td>2015/1/12</td> <td>今日は、予定が無い</td> </tr>
</tbody>
</table>
</div><style>
#t1,#t2{ border-collapse:collapse;}
#t1 th,#t2 td{ border:1px solid #000000;}
#t2d {height:200px; overflow:auto;}
</style>
<script>
window.onload=function(){
var c1=document.getElementById("t1").getElementsByTagName("tr")[0].getElementsByTagName("th");
var c2=document.getElementById("t2").getElementsByTagName("tr")[0].getElementsByTagName("td");
for(var i=0;i<c1.length;i++){
var w1=c1[i].offsetWidth -2;
var w2=c2[i].offsetWidth -2;
var w=(w1>w2)?w1:w2;
c1[i].width=w;
c2[i].width=w;
}
document.getElementById("t2d").style.width=(document.getElementById("t1").offsetWidth+20).toString()+"px";
}
</script>
<table id = "t1">
<col><col>
<tbody>
<tr> <th>date</th> <th>schedule</th> </tr>
</tbody>
</table>
<div id="t2d">
<table id = "t2">
<col><col>
<tbody>
<tr> <td>2015/1/1</td> <td>今日は、運動会</td> </tr>
<tr> <td>2015/1/2</td> <td>今日は、修学旅行</td> </tr>
<tr> <td>2015/1/3</td> <td>今日は、卒業式</td> </tr>
<tr> <td>2015/1/4</td> <td>今日は、体育の日</td> </tr>
<tr> <td>2015/1/5</td> <td>今日は、葬式</td> </tr>
<tr> <td>2015/1/6</td> <td>今日は、結婚式</td> </tr>
<tr> <td>2015/1/7</td> <td>今日は、遠足の日</td> </tr>
<tr> <td>2015/1/8</td> <td>今日は、夏祭り</td> </tr>
<tr> <td>2015/1/9</td> <td>今日は、海の日</td> </tr>
<tr> <td>2015/1/10</td> <td>今日は、山の日</td> </tr>
<tr> <td>2015/1/11</td> <td>今日は、誕生日</td> </tr>
<tr> <td>2015/1/12</td> <td>今日は、予定が無い</td> </tr>
</tbody>
</table>
</div>

- 0
- 件

通報する

この回答へのお礼

styleは別としてscriptはどうしても必要なんでしょうか???

<style>
#t1,#t2{ border-collapse:collapse;}
#t1 th,#t2 td{ border:1px solid #000000;}
#t2d {height:200px; overflow:auto;}
</style>
<script>
window.onload=function(){
var c1=document.getElementById("t1").getElementsByTagName("tr")[0].getElementsByTagName("th");
var c2=document.getElementById("t2").getElementsByTagName("tr")[0].getElementsByTagName("td");
for(var i=0;i<c1.length;i++){
var w1=c1[i].offsetWidth -2;
var w2=c2[i].offsetWidth -2;
var w=(w1>w2)?w1:w2;
c1[i].width=w;
c2[i].width=w;
}
document.getElementById("t2d").style.width=(document.getElementById("t1").offsetWidth+20).toString()+"px";
}
</script>

通報する

お礼日時：2015/09/28 15:55

No.2

回答者： yambejp
回答日時：2015/09/28 13:29

＞yambejpさんが正解と思われるhtmlのソース

ヘッダ固定のtbodyスクロールはcssではできません。
どうしてもというならテーブルを分けて幅をあわせ、データ側のテーブルをdivで囲みます

- 0
- 件

通報する

この回答へのお礼

早速の返事有難う御座います。

済みません。htmlのイメージがわきません。htmlのソースをご提示願います。
宜しく、お願いします。

通報する

お礼日時：2015/09/28 14:19

No.1

回答者： yambejp
回答日時：2015/09/28 11:52

なんのためのfloat？

theadはtrレベルでfloatして、tbodyはそれじたいでfloatしていれば
表記の通りにしかならないのでは？
（tbody自体のfloatがなんの意味があるかさっぱりですが・・・）

- 0
- 件

通報する

この回答へのお礼

済みません。詳しい事は分かりませんが。単にテーブルをスクロールさせたかったので。
ネットで検索しましたら、下記が有りましたのでそれを参考にしました。
http://detail.chiebukuro.yahoo.co.jp/qa/question …
http://khurata.dtdns.net/QA/q1088973685/

済みません。yambejpさんが正解と思われるhtmlのソースをご提示願えないでしょうか。
宜しく、お願いします。

通報する

お礼日時：2015/09/28 12:27

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！