Topic: MDB responsive table
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?
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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