Sticky Table Headers Using Position Sticky

Overview

Position sticky is applied to different elements to make them stick at a particular position upon the user's scrolling action. Position sticky is used extensively to make table headers sticky. Position sticky will not work with <thead> and <tr> elements as defined in CSS 2.1 specification. Applying position sticky to <th> and <td> element is the only workaround for making the table headers sticky. <thead> will not generate boxes, that is the main reason why we can't transform them using position: sticky.

Making Table Header Sticky

We will add position:sticky for <th> and <td> elements in the table. We will add position: sticky to all the <th> elements in the first row to make these headers sticky.

<h1>Position sticky</h1>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Roll No.</th>
        <th>Address</th>
        <th>Section</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>AKASH</td>
        <td>2</td>
        <td>Vasant Kunj</td>
        <td>Section A</td>
      </tr>
      <tr>
      <td>SIMRAN</td>
        <td>3</td>
        <td>Mukerhji Kunj</td>
        <td>Section B</td>
      </tr>
      <tr>
       <td>YUG</td>
        <td>5</td>
        <td>Rajiv Nagar</td>
        <td>Section D</td>
      </tr>
      <tr>
      <td>VEDH</td>
        <td>7</td>
        <td>Nagawara</td>
        <td>Section A</td>
      </tr>
      <tr>
      <td>PRIYA</td>
        <td>11</td>
        <td>Malaviya Nagar</td>
        <td>Section B</td>
      </tr>
      </tbody>
  </table>

We will write the below code in the CSS file:

table th{
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: red;
}

Making Table Header Sticky In Angular Component

We will use classes row and col-mid-12 and we will see how we can make the headers sticky in an Angular project using bootstrap. We will go to app.component.html file and write the below code:

   <div class="row">
      <div class="col-md-12">
        <table class="table">
          <tr style="color:#00306c;font-size: 12px;font-weight: normal;">
             <th>Set on Date</th>
             <th>Debug Expression</th>
            <th>Set off by</th>
            <th>Set off date</th>
            <th>Set off notes</th>

          </tr>
          <tr *ngFor="let alarm of AlarmHistory | async">
            <td><small>{{alarm.setOnDate}}</small></td>
            <td><small>{{alarm.alarmExpression}}</small></td>
            <td><small>{{alarm.debugExpression}}</small></td>
            <td><small>{{alarm.setOffBy}}</small></td>
            <td><small>{{ alarm.setOffDate }}</small></td>
            <td><small>{{alarm.setOffDesc}}</small></td>
          </tr>
        </table>
      </div>
    </div>

Now we will go to app.component.ts file and define the AlarmHistory as follows.

alarmHistories":[
{
"id":null,
"alarmId":3436,
"alarmHistoryStatus":null,
"alarmStatus":null,
"setOnDate":"2019-08-13T08:10:41.919+0000",
"setOffDate":"2019-08-13T08:15:55.035+0000",
"setOffMode":null,
"setOffBy":"System",
"setOffDesc":"Proper data restored by system",
"alarmExpression":null,
"debugExpression":"(29.0 < 60)",
"isActive":null
},
{
"id":null,
"alarmId":3442,
"alarmHistoryStatus":null,
"alarmStatus":null,
"setOnDate":"2019-08-13T08:10:41.902+0000",
"setOffDate":"2019-08-13T08:15:55.018+0000",
"setOffMode":null,
"setOffBy":"XYZ",
"setOffDesc":"Proper data restored by XYZ",
"alarmExpression":null,
"debugExpression":"(20.0 < 60)",
"isActive":null
},
{
"id":null,
"alarmId":3441,
"alarmHistoryStatus":null,
"alarmStatus":null,
"setOnDate":"2019-08-13T08:10:41.884+0000",
"setOffDate":"2019-08-13T08:15:55.002+0000",
"setOffMode":null,
"setOffBy":"ABC",
"setOffDesc":"Proper data restored",
"alarmExpression":null,
"debugExpression":"(28.0 < 60)",
"isActive":null
},
{
"id":null,
"alarmId":3441,
"alarmHistoryStatus":null,
"alarmStatus":null,
"setOnDate":"2019-08-13T08:10:41.884+0000",
"setOffDate":"2019-08-13T08:15:55.002+0000",
"setOffMode":null,
"setOffBy":"System 4",
"setOffDesc":"Proper data restored on system4",
"alarmExpression":null,
"debugExpression":"(35.0 < 60)",
"isActive":null
},
{
"id":null,
"alarmId":3441,
"alarmHistoryStatus":null,
"alarmStatus":null,
"setOnDate":"2019-08-13T08:10:41.884+0000",
"setOffDate":"2019-08-13T08:15:55.002+0000",
"setOffMode":null,
"setOffBy":"System 1",
"setOffDesc":"Proper data restored on System1",
"alarmExpression":null,
"debugExpression":"(46.0 < 60)",
"isActive":null
}
]

We will go to app.compoent.scss file and add the below code.

table th{
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: red;
}

Comments