Topic: MDBDatatable is not changing with screen width and stays fixed in width

Riva priority asked 10 months ago

MDBDatatable is not as responsive as a normal table. It stays fixed in width when the screen width changes. So the layout looks weird if the screen width is small. Is there any solution that would be able to resolve this issue? Thanks

Bartosz Cylwik staff answered 10 months ago

Hi! If you don't like how the table looks on smaller screens you can try to play a bit with the classes added to td elements yourself.

By default, the td elemets are receiving: white-space: no wrap and text-overflow:ellipsis styles. You can try to change those values so that the words could be wrapped to the next line. That would make the cells to look less "fixed".

For example:

.datatable table th, .datatable table td {
  white-space: normal;
  text-overflow: clip

You can also checkout the snippet I made for you, where I also decreased the padding for smaller screens:

Best Regards!

Riva priority commented 10 months ago

Thanks, Bartosz The MDBdatatable overflow parent div. Do you have any suggestions to solve it? Thanks.

Bartosz Cylwik staff commented 10 months ago

You could experiment with adjusting the font size or spacing, but when dealing with numerous data columns, the table will eventually overflow the parent element. The MDBDatatable component will then display a horizontal scrollbar.

While I'm unsure if this approach makes sense in you case, you might try dividing your data into two separate Datatable components. This could provide the columns with additional space.

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: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 4.0.0
  • Device: thinkpad
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: No