tableのmax-height

現在テーブルレイアウトを作成していますが、画面のサイズ以上に大きくならないテーブルを作成したいと思っております。

テーブル内の要素はサーバー側で動的に書き出して、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件

ベストアンサー

table系の要素にmax-width / max-heightは効きません。
そういう仕様です。
table全体の高さをmax-height指定したいなら、table要素を
divなどで囲み、そちらにmax-heightを指定してはいかがでしょうか？

投稿2015/10/30 04:01

aKusano

総合スコア3763

9mang-y-wada

2015/10/30 04:51

回答ありがとうございます。その仕様は知りませんでした。 divで囲んでそれにmax-heightを指定してみましたが、table内の要素が増えるとmax-heightを超えてしまいました。また、tbodyに対してmax-heightを固定値で指定してみると見た目上はうまく動作しました。しかし、やはり固定値だと汎用的ではないため、解決には至りませんでした。他に何か原因として考えられるようなことがあればご教授いただけますでしょうか？