Angular 7 Fixed Header Table Examples Not Working

Question

I am running into a big problem with fixed header tables as it relates to my Angular application. Using this this example (which is also this one) as a basis for my question, I thought originally it was my component, but now, I have attached this same code into my index.html page and eliminated the angular app from being implemented. I should not that I am still using ng serve and having the application and page render on my local machine. 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>

And then right after that, in my html, I have the table:

    <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>

And yet, this is what is displayed:

Can somebody help me understand why this can work in a variety of examples, but when I try to run it with my angular application on my local machine, even outside the app, it doesn't work?

UPDATE:

The issue may be that it's because I'm using Bootstrap 4 rather than Bootstrap 3. Per jahller's explanation, when I changed my bootstrap to be 3.3.7, it works. Unfortunately, I'm building my app with Bootstrap 4. Can anyone point me to an example that works with Bootstrap 4?

UPDATE 2:

Per jahller's additional edit, the issue was that my columns were using the col-xs-{num} classes for the table columns. By switching them to col-{num} classes, the scrollable table with fixed header works perfectly!

what exactly is the problem? the functionality seems to be what you want, right? is it the formatting? — jahller, Feb 26 '19 at 20:20
It is doing the sticky header correctly. It is the formatting that is the problem. The other examples show a table not only across the screen (width 100%) but also the columns correctly spaced. You noticed that the col-xs-2 and col-xs-8 classes are being used in my example, but they are not being implemented. The columns are only spaced out by the data, not by the bootstrap classes. Are they getting overwritten? If so how? — user1100412, Feb 26 '19 at 20:23

jahller · Accepted Answer · 2019-02-26T22:37:41.437

1

the example you were used is using bootstrap 3 instead of bootstrap 4 check the app.component.html in this stackblitz example https://stackblitz.com/edit/angular-v8mxae

there i imported the same bootstrap version that was used in your examples codepen

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

with this version is works as expected

*Edit

for using bootstrap 4 just remove the xs part of col- classes. the grid system was slightly changed from bootstrap 3 to 4.

so instead of col-xs-2 use col-2, instead of col-xs-4 col-4, etc.

edited Feb 26 '19 at 22:37

answered Feb 26 '19 at 20:30

jahller

2,705
1
28
30

I can see that it works with that version. Can anyone point me to an example that works with bootstrap 4? – user1100412 Feb 26 '19 at 20:40
see my updated answer or check the official migration guide here https://getbootstrap.com/docs/4.0/migration/#grid-system-1 – jahller Feb 27 '19 at 09:15
jahller, wouldn't you know it, that did it! I verified both in the angular app and in the page outside of it, just simply changing the column names worked. Awesome, thank you! – user1100412 Feb 27 '19 at 13:23

Angular 7 Fixed Header Table Examples Not Working

1 Answers1