MDBTable Sticky header & scrollable content

Observed behaviour:

The same code works differently across browsers

Expected behaviour:

Cross-browser consistency

Description:

What worked in 8.0.0 in Safari/iOS but did not in Chrome (sticky header issue), in 8.1.0 started working in Chrome but caused a strange behaviour in Safari/iOS.

I made a table with a sticked header scrollable and put it within MDBCard body.

Code:

test.component.html

<div class="container">
  <div class="row">
    <div class="col">
      <mdb-card>
        <mdb-card-header class="y">
          <p class="lead">Sticky Header Within Scrollable Table Test</p>
        </mdb-card-header>
        <mdb-card-body>
          <table mdbTable small="true" striped="true" stickyHeader="true" mdbTableScroll scrollY="true" scrollX="true" maxHeight="300" stickyHeaderBgColor="rgb(66,133,244)" stickyHeaderTextColor="#ffffff">
            <thead class="sticky-top">
            <tr>
              <th>Letter</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let letter of rows">
              <td>{{letter}}</td>
            </tr>
            </tbody>
          </table>
        </mdb-card-body>
      </mdb-card>
    </div>
  </div>
</div>

• class="y" stands just for corporate yellow background

test.compoment.ts

import { Component, OnInit } from '@angular/core';

@Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.scss'] }) export class TestComponent implements OnInit {

rows: string[] = [ "A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P" ];

constructor() { }

ngOnInit() { }

}

Live check at:

https://test.pzmot.pl/site/test