Angular how to make table headers fixed when scrolling

Question

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

JakeFromSF · Accepted Answer · 2019-07-15 17:28:03Z

2

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

answered Jul 15, 2019 at 17:28

JakeFromSF

3152 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular how to make table headers fixed when scrolling

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related