I'm trying to decrease the height of my table rows, but adjusting the height through CSS on the <tr> element doesn't seem to be working. Even if I set the height to less than 50px, I don't see any noticeable change. How can I make the row height smaller to fit the table on the screen without needing to scroll down?
Below is the current structure of my table. I simply want to reduce the row height to make the whole table more compact.
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Overtime Hours</th>
<th scope="col">Compensation Hours</th>
<th scope="col">Vacation</th>
<th scope="col">Personal Hours</th>
<th scope="col">Sick Hours</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Carry Over</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
// Rest of the table rows
</tbody>
</table>