cssで困ったという話です
作りたいもの自体は作れましたが問題となった部分は解決できてません
結局問題となった方法の解決方法書いてないじゃん!ということである意味閲覧注意です
作りたいもの自体は作れましたが問題となった部分は解決できてません
結局問題となった方法の解決方法書いてないじゃん!ということである意味閲覧注意です
htmlでページを作っていて、tableを、スクロールさせるようにしました
縦を縮めると
ソース
ですが、これだと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を設定します
今回やったもののコードはこれです
tdの幅を%で指定してます
これだと、こうなります
上のtheadの部分がずれてます
tableのwidthと各tdのwidthを%で指定するとこうなります
pxで指定すると、tbodyだけスクロールの解説ページによくあるようにちゃんと表示されます
原因はposition:absoluteを指定するとwidthの100%が親要素にならないようです
なぜかは、私には分からない・・・
absoluteを指定すると親をずっと見ていってstatic以外が指定されているのが親で、基準位置になるはずなんですが…
なんとなくtheadをfixedで試してみたら、基準位置が(0,0)になって、ウィンドウが親になってるみたい
absoluteでは位置はちゃんとしてるのに…
absolute使うと、親要素を100%とできないのか試すために、次のコードを用意
端までいってるし親要素が100%になってるぽい
ということはtableと組み合わせるとダメなのか…
解決方法がわからないし、もうバグなんじゃないかと思って、Fxでも試してみたのですが、同じ表示
バグってわけではなさそう
でも、tableでだけabsoluteやfixedのposition系が特殊な動きなんて聞いたことないしー
最終的に、複雑なtableはやめてliとか使ってtable風に作りました
divばっかだとわかりづらいので行trをliで、セルtdをspanにしてます
縦を縮めると
ソース
<!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の幅を%で指定してます
これだと、こうなります
上のtheadの部分がずれてます
tableのwidthと各tdのwidthを%で指定するとこうなります
pxで指定すると、tbodyだけスクロールの解説ページによくあるようにちゃんと表示されます
原因はposition:absoluteを指定するとwidthの100%が親要素にならないようです
なぜかは、私には分からない・・・
absoluteを指定すると親をずっと見ていってstatic以外が指定されているのが親で、基準位置になるはずなんですが…
なんとなくtheadをfixedで試してみたら、基準位置が(0,0)になって、ウィンドウが親になってるみたい
absoluteでは位置はちゃんとしてるのに…
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>
端までいってるし親要素が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>
コメントする