HTML table isn't responding to overflow=scroll or any height changes

Viewed 40

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(&quot;current&quot;, &quot;precinct&quot;)">Precinct:</th>
                                        <th onclick="sortTable(&quot;current&quot;, &quot;type&quot;)">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(&quot;all&quot;, &quot;precinct&quot;)">Precinct:</th>
                                        <th onclick="sortErrorTable(&quot;all&quot;, &quot;type&quot;)">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.

1 Answers

th {
  border-style: solid;
}
                       <div class="tab-content noPadding" style="height: 100%; width: 100%; overflow: scroll;">
                            <div class="tab-pane active" id="dataTab"> ... </div>
                            <div class="tab-pane" id="errorTab">
                                <h5>Current Precinct: a;lkjsdf;lakjdsf;lkasjfds;lkfjdsaf;lkdsjfds;lfakj</h5>
                                <table class="table table-hover scrollable">
                                    <thead>
                                        <th onclick="sortTable(&quot;current&quot;, &quot;precinct&quot;)">Precinct: fskl;ads;lkfjdsf;lskfjds;lfajdsfj;lksf</th>
                                        <th onclick="sortTable(&quot;current&quot;, &quot;type&quot;)">Error Type:jfkal;dsljfla;jflkdsjflkdsjflkdsjflka</th>
                                        <th>Resolve Errorlja;jdsfl;ksajflkdsjflkdsjfl</th>
                                    </thead>
                                    <tbody id="currentErrorsTable"></tbody>
                                </table>
                                <h5>All Errors:</h5>
                                <table class="table table-hover table-sm">
                                    <thead>
                                        <th onclick="sortErrorTable(&quot;all&quot;, &quot;precinct&quot;)">Precinct:</th>
                                        <th onclick="sortErrorTable(&quot;all&quot;, &quot;type&quot;)">Error Type:</th>
                                        <th>Resolve Error</th>
                                    </thead>
                                    <tbody id="allErrorsTable" class="scrollable" style="height: 10px"></tbody>
                                </table>
                            </div>

Related