MDB responsive table


Topic: MDB responsive table

Ankita Singh asked 4 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: https://mdbootstrap.com/support/jquery/can-a-div-take-up-all-renaming-screen-space/In 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 4 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.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: 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