DIV要素の中のTABLEの行数は可変=高さ可変のTABLE。5行以下の時は外のDIVの高さを当該TABLEの高さとしたい

Question

DIVの中にテーブルが配置されています。
TABLEのデータ行が6行以上のときは、外のDIVの高さを固定にし縦スライドバーをユーザさんに操作させる。
また、6行未満の際は、そのDIVを当該テーブルの行　全てがきっちり収まるぐらいの高さにしたいと考えています。
DIVのCLASS名=updLines、TABLEのCLASS名=exstrsvです。

試行錯誤しても満足いくデザインにならないので（6行未満で表示される際、行数によって余白がありすぎたり狭すぎたりする！）、解決策をご教示頂ければ幸いです。

.updLines {
	overflow: scroll;
	display: none;
}

td, th {
	border-width: thin;
	text-align: center;
	white-space: nowrap;
	border-color: #CCCCCC;
	border-style: solid;
	line-height: 1em;
	padding: 0;
}

if (data.length >= 6) {
	$(".updLines").height(8.28 + 'em'); //見た感じで決めた
} else {
	$(".updLines").height($(".exstrsv").height() * 1.2); //．．．これじゃ駄目みたい
}

Answer 1

こういう事ではない？

.updLines {
  max-height: 10em;
  overflow-y: auto;
}
```**動くサンプル：**[https://jsfiddle.net/L46m07t2/](https://jsfiddle.net/L46m07t2/)

Comments

[saya24]

そんな簡単にうまくいくわけがないと思いながら．．．まさにその通りでした。
ありがとうございました。