I am in need of a vertical stack of blocks, which may include scrolls, contained within a fixed-sized container without scrolls. The number of visible blocks is dynamically managed by JavaScript code. Some blocks can be hidden or shown, and when a block is hidden, the visible blocks should expand to occupy all available space.
I initially used a table element for this layout, but I encountered issues with the table cells expanding vertically and the entire table exceeding the specified height.
Is there a way to fix the height of the table? Or would an alternative design approach be more suitable?
Below is the HTML and CSS code I have been working with:
table{
table-layout:fixed;
width: 200px;
height: 300px;
}
div{
height: 100%;
width: 100%;
overflow-y:scroll;
white-space:normal;
}<table border="1">
<tr><td><div>
dsdgfsjafkgasfd sajhsadfhsafdsfsafs afsafsafsafsa fsafsafsafsafsaf
asfsafsafsafsafsafs afsaffsfsasafsafsfa sfasfsafsafsaffsafsaffsafsa
</div></td></tr>
<tr><td><div>
dsdgfsja fkgascfdsajhsadfhsafdsfsaf safsafsafsafs afsafsafsafsafsaf
asfsafsafsaf safsafsafs affsfsasafsafsfa sfasfsafsafsaffsafsaffsafsa
</div>
</table>