プロが教えるわが家の防犯対策術!

下記の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>

「FireFoxのhtmlでtheadとt」の質問画像

質問者からの補足コメント

  • どう思う?

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

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

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

A 回答 (5件)

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



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

なのでこのソースに関してはcolはあまり意味がありません。
タグ自体削除しても問題ありません。
    • good
    • 0
この回答へのお礼

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

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

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

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



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

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

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

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

>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>
    • good
    • 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

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



ヘッダ固定のtbodyスクロールはcssではできません。
どうしてもというならテーブルを分けて幅をあわせ、データ側のテーブルをdivで囲みます
この回答への補足あり
    • good
    • 0
この回答へのお礼

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

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

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

なんのためのfloat?


theadはtrレベルでfloatして、tbodyはそれじたいでfloatしていれば
表記の通りにしかならないのでは?
(tbody自体のfloatがなんの意味があるかさっぱりですが・・・)
    • good
    • 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で質問しましょう!