Topic: MDB responsive table

Ankita Singh free asked 3 years ago

Scenario : My screen consist of a section with flexbox headers which are fixed on top, remaining of the screen is populated by mdbTable and a fixed footer. I need the section of the table to take exact height available along with sticky headers. Problem : If I specify the height of table with max-height I can't make it responsive for different screen sizes and zoom percentages.Follow up: given support fix, if bottom scrollable section had mdbTable instead of text with scroll how to make its headers sticky?

Grzegorz Bujański staff answered 3 years ago

Try to apply this styling:

tbody {
  display: block;
  max-height: 300px;
  overflow-y: scroll;

thead {
  display: table;
  width: 100%;
  table-layout: fixed;

This should add scroll to the elements inside the tbody.

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 10.0.1
  • Device: Notebook
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes