MDBTable Sticky header & scrollable content


Topic: MDBTable Sticky header & scrollable content

Wojciech Marciniak asked 5 years ago

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


Bartosz Termena staff answered 5 years ago

Dear @Wojciech Marciniak

Just get rid of class="sticky-top" in your <thead>.

Hope it helps!

Best Regards, Bartosz.


Wojciech Marciniak commented 5 years ago

Thanks. Shame I haven't resolved it on my own.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.1.1
  • Device: iMac/iPhone
  • Browser: Safari/Chrome
  • OS: macOS 10.14.6/iOS 12.4
  • Provided sample code: No
  • Provided link: Yes