1

Background: I am making a responsive Angular 8 application which I have a table of a very large data-set. Data is supposed to arrive in the chunks of 100 row per request. So the height of table is not determined. I am also using bootstrap 4 as the base for the application and this table. This table has different behaviors, and I did not take Angular material, or other available libraries.

Goal: Since it is large data set, It is important that when user scroll down in the page the header of table be sticky, so the user can keep track of what s/he is watching.

In short codes looks like the following that I trimmed it for stackoverflow

HTML codes

<div class="emp-result-container">
   <div class="table-responsive">
      <table class="table table-bordered table-hover table-fixed">
         <thead class="thead-dark">
             <tr>
                data
             </tr>
         </thead>
         <tbody>
             <tr *ngFor="let result of empSearchResult?.lines">
                <td>
                   {{ result }}
                </td>
             </tr>
         </tbody>
      </table>
   </div>
</div>

SASS

.emp-result-container {
    margin-left: 25px;
    margin-right: 25px;
    //max-height: 7300px;
    //overflow-y: auto;


  .table.table-hover.table-bordered {
      margin-top: 50px;
      width: 100%;
      border-collapse: collapse;
      //position: sticky;
      //top:0;
    }
 }

I have read almost all of the stackoverflow posts about this topic, most of them are about a table with a height, and I also tried them, as you can see the typical CSS answer is tried, and commented by me. None of them works here.

An novel CSS, and Angular solution for this big data table is appreciated from community.

Ali Saberi
  • 864
  • 1
  • 10
  • 33
  • Possible duplicate of [Table headers position:sticky and border issue](https://stackoverflow.com/questions/57166162/table-headers-positionsticky-and-border-issue) – Grzegorz T. Sep 27 '19 at 22:00
  • If you were to add `position: sticky` to the `.table`, the entire table would be stickied. You have defined a `` section, and you are trying to sticky the headers section, so where do you think you should be adding `position: sticky;` and `position: -webkit-sticky;`? – terahertz Sep 28 '19 at 09:52
  • @terahertz I also tried position: sticky; top:0; inside thead.thead-dark, and later inside th. no good result – Ali Saberi Sep 30 '19 at 02:53
  • @GrzegorzT.wrongas you can see in the link that share as the possible duplication, the container height is `height: 200px;` which can be applied for small size tables, not big data table. My question was targeting if the table container has not height limit due to nature of big data – Ali Saberi Sep 30 '19 at 03:10

0 Answers0