I have the following html (excuse the weird indentation). The part in question (for now) is the very last table (the one whos body has id="allErrorsTable"). I am trying to get it so that the table body will scroll instead of extending off of the screen when its contents grows too large.
<div class="tab-content noPadding" style="height: 100%">
<div class="tab-pane active" id="dataTab"> ... </div>
<div class="tab-pane" id="errorTab">
<h5>Current Precinct:</h5>
<table class="table table-hover scrollable">
<thead>
<th onclick="sortTable("current", "precinct")">Precinct:</th>
<th onclick="sortTable("current", "type")">Error Type:</th>
<th>Resolve Error</th>
</thead>
<tbody id="currentErrorsTable"></tbody>
</table>
<h5>All Errors:</h5>
<table class="table table-hover table-sm">
<thead>
<th onclick="sortErrorTable("all", "precinct")">Precinct:</th>
<th onclick="sortErrorTable("all", "type")">Error Type:</th>
<th>Resolve Error</th>
</thead>
<tbody id="allErrorsTable" class="scrollable" style="height: 10px"></tbody>
</table>
</div>
I know that all of the heights of the parents from the top level (tab-content) div and up are fine because I have a seperate table in the "dataTab" div with the same scrolling feature working just fine. To be explicit though, the 100% in the top level div here derives from a parent div with height="100vh", so definitely an absolute height.
I know it's an issue of the height not being absolute for the table for some reason but I gave it a height of 10px just for testing and it still doesn't resize. Can someone help me figure out where I need to explicitly declare heights for this? I need them to be relative heights in the end but getting it to resize/scroll at all is the first priority.