Here is the structure of my HTML:
<div class="wrapper">
<table>
<tbody>
<tr>
<td>some content</td>
</tr>
</tbody>
</table>
</div>
The style for my wrapper looks like this:
.wrapper{
color: #444444;
height: 165px;
line-height: 135%;
margin-top: 10px;
padding-bottom: 10px;
width: 270px;
}
and my table only has a defined width along with some inherited styles :
.wrapper > table {
width: 100%;
}
table {
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
max-width: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
What I am trying to achieve is having my table consume the maximum height of its parent element, which is .wrapper with a height value of 165px, but the table's height does not seem to decrease as expected.
My ultimate goal was to set a vertical overflow on the wrapper so that if the table exceeds the height of .wrapper, users can scroll. Any ideas or hints on what might be missing here?
When I adjust the table's height to be greater than 190px, it responds by growing larger. However, when I reduce it to smaller sizes like 165px or below 190px, it does not seem to react accordingly.