D.Bugger D.Bugger - 3 months ago 21
HTML Question

Scroll div inside td in fixed height table

The issue: https://jsfiddle.net/sjefb/xctr0zve/1/

<div style="height: 500px; border: 1px solid red">
<table border="1" id="table1">
<tr>
<td id="td1"></td>
</tr>
<tr>
<td id="td2">
<div>
testtest
</div>
</td>
</tr>
<tr>
<td id="td3">
<div id="div1">
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
</div>
</td>
</tr>
</table>
</div>


CSS:

#table1 {
height: 100%;
width: 100%;
}

#td1 {
height: 40vh;
width:100%;
min-height: 240px;
}

#td2 {}

#td3 {
height: 60%;
overflow: hidden;
}

#div1 {
overflow: auto;
height: 180px;
/*works, not what I want*/
height: 100%;
display:block;
/* doesn't work*/
}


I'd like the lines in td3 to scroll, and the table not to exceed the red area. The pages must be readable on all screen formats, so everything has to be done using percentages. I tried and puffed and puffed, but the table still grows too large.

Do you have any tips for me? Thanks!

UPDATE

This is what I get at the moment:
table too high

but I want to see this:
intended layout

Answer

here you have an updated jsfiddle

#div1 {
  height:100%;
  overflow-y: scroll;
}