I set the height of my table to a specific height so I could use overflow-y: scroll on it, and this caused the tds to expand to fill all the available height. I have tried changing height to max-content, as well as set values such as 1rem however nothing changes the height of them.
What I have:
What I want:
This is a minimal reproducible example:
<html>
<head>
<style>
table {
width: 100%;
height: 20rem;
background-color: green;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Test Column</th>
<th>Test Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test Data</td>
<td>Test Data 2</td>
</tr>
</tbody>
</table>
</body>
</html>
