CODEWITHSUNDEEP
angularbootstrap-4
lironzaa
lironzaa

Reputation: 544

Angular how to make table headers fixed when scrolling

I have a table in Angular which i want to make the it headers fixed while i'm scrolling but i'm unable get the desired result. Every time another element is not presented like it should be.

I tried to apply css classes fixed and sticky to the TR of the THEAD but the i couldn't get the desired result

link to my stackblitz: https://stackblitz.com/edit/angular-vpxuo1

Upvotes: 1

Views: 18021

Answers (1)

JakeFromSF
JakeFromSF

Reputation: 315

This worked with your stackblitz you provided

CSS:

.table-fixed {
  width: 100%;
}

/*This will work on every browser but Chrome Browser*/
.table-fixed thead {
  position: sticky;
  position: -webkit-sticky;
  top: 0;

}

/*This will work on every browser*/
.table-fixed thead th {
    position: sticky;
    position: -webkit-sticky;
    top: 0;

}

Html:

<table id="tableSortExample" mdbTable class="z-depth-1 table-fixed">
      <thead>
        <tr>
          <th aria-controls="tableSortExample" scope="col" class="blue-text pointer-hover" [mdbTableSort]="history"
            [sortBy]="headElements[0]">
            Type
            <mdb-icon fas icon="sort"></mdb-icon>
          </th>

Reference this link for more information: stackoverflow.com

Upvotes: 2

Related Questions