Search code examples
cssangularsassbootstrap-4fixed-header-tables

Angular 7 Fixed Header Table Examples Not Working

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:

Table is not 100% wide

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!

Solution

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