Topic: Datatables movable column width

HoleInOne priority asked 2 years ago

In Excel you can as a user resize the width of a column. What is the best aproache to simulate the same in Datatables?

Michał Duszak staff answered 2 years ago

With this CSS you can set column's width to extremely wide / narrow:

.datatable table {
  table-layout: fixed;

.datatable table td, .datatable table th {
    overflow: hidden;
    white-space: nowrap;
    -moz-text-overflow: ellipsis;        
    -ms-text-overflow: ellipsis;
   -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    max-width: none;

Then you have to handle resizing - the way you do it depends on you. For example I have made buttons which resize the first column:

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 Standard
  • MDB Version: MDB5 3.9.0
  • Device: Any
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No