Q&A
現在テーブルレイアウトを作成していますが、画面のサイズ以上に大きくならないテーブルを作成したいと思っております。
テーブル内の要素はサーバー側で動的に書き出して、max-heightで指定した高さまでは要素に合わせてテーブルの高さが決まるようにし、tbody{overflow-y:scroll;}としてテーブル内の要素が画面からはみ出す場合はテーブルの中でスクロールさせたいのですが、max-heightで高さに制限をかけてもスクロールせず画面からはみ出してしまいます。
また、jsはなるべくなら使いたくないと考えており、できればcssで解決できればと思います。
解決策があればご教授いただけますと幸いです。
html
html5
1<html> 2 <body> 3 <table> 4 <thead class="fixHeader"> 5 <tr> 6 <th>title</th> 7 </tr> 8 </thead> 9 <tbody class="scrollTbody"> 10 <tr> 11 <td>contents</td> 12 </tr> 13 </tbody> 14 </table> 15 </body> 16<html>
css
html,body{height:100%;} table{ max-height:95%; border:solid 1px #000; border-collapse:collapse; } tr{height:20px;} th,td{box-sizing:border-box;} .fixHeader, .scrollTbody{display:block;} .scrollTbody{ overflow-y:scroll; max-height:calc(100% - 21px); }
max-heightを指定するだけでは明示的に高さを指定されておらず、<table>の子である<tbody class="scrollTbody">がmax-heightで用いている100%を取得できていないのかと個人的に考えたのですが答えは見つけられませんでした…。
回答1件
0
ベストアンサー
table系の要素にmax-width / max-heightは効きません。
そういう仕様です。
table全体の高さをmax-height指定したいなら、table要素を
divなどで囲み、そちらにmax-heightを指定してはいかがでしょうか？
投稿2015/10/30 04:01
総合スコア3763
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/10/30 04:51
2015/10/30 04:57
2015/10/30 05:14