I've encountered a major issue with fixed header tables in relation to my Angular application. Utilizing the examples provided here and here, I initially thought it was a problem within my component. However, after embedding the same code into my index.html page without implementing the Angular app, the issue persisted. It's worth mentioning that I am still using ng serve to run the application locally. My CSS includes:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css" />
<style type="text/css">
.table-fixed tbody {
height: 200px; overflow-y: auto; width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
display: block;
}
.table-fixed tr:after {
content: ""; display: block; visibility: hidden; clear: both;
}
.table-fixed tbody td,
.table-fixed thead > tr > th {
float: left;
}
.table > thead > tr > th,
.table > thead > tr > td {
font-size: .9em;
font-weight: 400;
border-bottom: 0;
letter-spacing: 1px;
vertical-align: top;
padding: 8px;
background: #51596a;
text-transform: uppercase;
color: #ffffff;
}
</style>
Following the CSS, in my HTML file, I have the table set up as follows:
<table class="table table-fixed">
<thead>
<tr>
<th class="col-xs-2">#</th><th class="col-xs-8">Name</th><th class="col-xs-2">Points</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-2">1</td><td class="col-xs-8">Mike Adams</td><td class="col-xs-2">23</td>
</tr>
<tr>
<td class="col-xs-2">2</td><td class="col-xs-8">Holly Galivan</td><td class="col-xs-2">44</td>
</tr>
...
</tbody>
</table>
However, upon rendering the page, I am faced with the following output:
https://i.sstatic.net/GJflm.png
I'm seeking assistance to comprehend why this setup functions well in other examples but fails when integrated into my angular application locally.
UPDATE:
The discrepancy might arise from using Bootstrap 4 instead of Bootstrap 3. As per jahller's insight, switching back to Bootstrap 3.3.7 resolved the issue. Nevertheless, since my project is built with Bootstrap 4, could someone direct me towards an example that aligns with Bootstrap 4?
UPDATE 2:
In accordance with jahller's advice, the problem stemmed from utilizing col-xs-{num} classes for the table columns. Swapping them out with col-{num} classes successfully enabled the scrollable table with fixed headers functionality!