cssで困ったという話です

作りたいもの自体は作れましたが問題となった部分は解決できてません
結局問題となった方法の解決方法書いてないじゃん!ということである意味閲覧注意です 
 

htmlでページを作っていて、tableを、スクロールさせるようにしました

scrollsample01

縦を縮めると

scrollsample02

ソース
<!doctype html>
<html>
<head>
<style>
html,body{width:100%;height:100%;margin:0;padding:0;font:18px meiryo}
tr td:nth-child(1){width:10%;background:pink;}
tr td:nth-child(2){width:20%;background:powderblue;}
tr td:nth-child(3){width:20%;background:greenyellow;}
tr td:nth-child(4){width:50%;background:orange;}
table{border-collapse:collapse;}
thead{border-bottom:1px solid black;}
td{text-align:center;}
</style>
</head>
<body>
<div style="height:50%;"></div>
<div style="width:100%;height:50%;overflow:auto;">
<table style="width:100%;">
<thead>
<tr><td>id</td><td>data1</td><td>data2</td><td>data3</td></tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>10101001</td></tr>
<tr><td>2</td><td>2</td><td>3</td><td>10010101</td></tr>
<tr><td>3</td><td>2</td><td>3</td><td>10001011</td></tr>
<tr><td>4</td><td>2</td><td>3</td><td>10000101</td></tr>
<tr><td>5</td><td>2</td><td>3</td><td>11001111</td></tr>
<tr><td>6</td><td>1</td><td>3</td><td>11111010</td></tr>
<tr><td>7</td><td>1</td><td>3</td><td>10000101</td></tr>
<tr><td>8</td><td>1</td><td>3</td><td>00101001</td></tr>
<tr><td>9</td><td>1</td><td>3</td><td>10000000</td></tr>
</tbody>
</table>
</div>
</body>
</html>


ですが、これだとtheadの見出し部分までスクロールされていくので、tbodyの部分だけをスクロールさせたいってなりました
コレ自体はその辺にサンプルも置いていて、難しいことじゃないです

しかし、今回はwidth、heightをブラウザのサイズに応じて変えたいため、全てパーセント指定で、px指定は使いません

普通、tableのtheadを固定してtbodyだけを動かすときは、divタグ2つでtableタグを囲んで、外側のdivタグにpading-top:30pxくらいを指定してtheadを表示する部分を確保、position:relativeでtheadの基準位置を設定、内側のdivではheight指定して、overflow:autoとします
そして、theadにposition:absoluteを指定して確保した部分に表示します

tbodyなどtable系のタグにはheightが使えないらしく(やってみたけど動作しなかった)、tbodyにheightつけてoverflow:autoっていうのはできません
セルtdの幅を固定して、overflow:hiddenとかもできなく、css操作ではtableは不便だったりします
この場合は、td内にdivを入れて、td内のdivにwidthとoverflow:hiddenを設定します

今回やったもののコードはこれです

<!doctype html>
<html>
<head>
<style>
html,body{width:100%;height:100%;margin:0;padding:0;font:18px meiryo}
tr td:nth-child(1){width:10%;background:pink;}
tr td:nth-child(2){width:20%;background:powderblue;}
tr td:nth-child(3){width:20%;background:greenyellow;}
tr td:nth-child(4){width:50%;background:orange;}
table{border-collapse:collapse;}
thead{border-bottom:1px solid black;}
td{text-align:center;}
</style>
</head>
<body>
<div style="height:50%;"></div>
<div style="width:100%;height:50%;position:relative;padding-top:30px;box-sizing:border-box;">
<div style="overflow:auto;width:100%;height:100%;">
<table style="width:100%;">
<thead style="position:absolute;left:0;top:0;width:100%;">
<tr><td>id</td><td>data1</td><td>data2</td><td>data3</td></tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>10101001</td></tr>
<tr><td>2</td><td>2</td><td>3</td><td>10010101</td></tr>
<tr><td>3</td><td>2</td><td>3</td><td>10001011</td></tr>
<tr><td>4</td><td>2</td><td>3</td><td>10000101</td></tr>
<tr><td>5</td><td>2</td><td>3</td><td>11001111</td></tr>
<tr><td>6</td><td>1</td><td>3</td><td>11111010</td></tr>
<tr><td>7</td><td>1</td><td>3</td><td>10000101</td></tr>
<tr><td>8</td><td>1</td><td>3</td><td>00101001</td></tr>
<tr><td>9</td><td>1</td><td>3</td><td>10000000</td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

tdの幅を%で指定してます
これだと、こうなります

scrollsample03

上のtheadの部分がずれてます
tableのwidthと各tdのwidthを%で指定するとこうなります
pxで指定すると、tbodyだけスクロールの解説ページによくあるようにちゃんと表示されます

原因はposition:absoluteを指定するとwidthの100%が親要素にならないようです
なぜかは、私には分からない・・・
absoluteを指定すると親をずっと見ていってstatic以外が指定されているのが親で、基準位置になるはずなんですが…
なんとなくtheadをfixedで試してみたら、基準位置が(0,0)になって、ウィンドウが親になってるみたい
absoluteでは位置はちゃんとしてるのに…

scrollsample04


absolute使うと、親要素を100%とできないのか試すために、次のコードを用意

<!doctype html>
<html>
<head>
<style>
html,body{width:100%;height:100%;margin:0;padding:0;font:18px meiryo}
div span:nth-child(1){width:10%;background:pink;}
div span:nth-child(2){width:20%;background:powderblue;}
div span:nth-child(3){width:20%;background:greenyellow;}
div span:nth-child(4){width:50%;background:orange;}
span{display:inline-block;}
</style>
</head>
<body>
<div style="position:relative;width:100%;">
<div style="position:absolute;width:100%;">
<span>a</span><span>b</span><span>c</span><span>d</span>
</div>
</div>
</body>
</html>

scrollsample05

端までいってるし親要素が100%になってるぽい
ということはtableと組み合わせるとダメなのか…

解決方法がわからないし、もうバグなんじゃないかと思って、Fxでも試してみたのですが、同じ表示
バグってわけではなさそう
でも、tableでだけabsoluteやfixedのposition系が特殊な動きなんて聞いたことないしー


最終的に、複雑なtableはやめてliとか使ってtable風に作りました
divばっかだとわかりづらいので行trをliで、セルtdをspanにしてます

<style>
ul,li{margin:0;padding:0}
li{list-style:none;}
li span{display:inline-block;}
li span:nth-child(1){width:10%;background:pink;}
li span:nth-child(2){width:20%;background:powderblue;}
li span:nth-child(3){width:20%;background:greenyellow;}
li span:nth-child(4){width:50%;background:orange;}
</style>

<ul class="thead">
<li><span>id</span><span>data1</span><span>data2</span><span>data3</span></li>
</ul>
<ul class="tbody">
<li><span>1</span><span>1</span><span>3</span><span>00101000011</span></li>
<li><span>2</span><span>2</span><span>3</span><span>11011101010</span></li>
<li><span>3</span><span>1</span><span>3</span><span>00100100011</span></li>
<li><span>4</span><span>1</span><span>3</span><span>11011010111</span></li>
</ul>