How to set fixed width to Data tables columns?

Question

I know it's been discussed here before so i went over all the answers first but still have some problems.

I have a table with a comments column with much more text then the others....i want to set fixed size to all the columns and only for the comments column to set a different size - or just to break line - don't know yet what is the best way... hope you can help me.

I didn't manage to get this code to work :

   bAutoWidth: false , 
  "aoColumnDefs": [
  { "sWidth": "20%", "aTargets": [ 0 ] },
  { "sWidth": "5%", "aTargets": [ 1 ] },
  { "sWidth": "10%", "aTargets": [ 2 ] },
  { "sWidth": "5%", "aTargets": [ 3 ] },
  { "sWidth": "40%", "aTargets": [ 4 ] },
  { "sWidth": "5%", "aTargets": [ 5 ] },
  { "sWidth": "15%", "aTargets": [ 6 ] }
  ],

Here is a sample of the project ( in production there are more columns with much more text) Plunker

Have a look at this link datatables.net/reference/option/columns.width — Niraj
– Niraj, Commented Apr 24, 2017 at 7:17

Emre Bolat · Accepted Answer · 2017-04-24 12:29:12Z

4

First; you need to make a small change in your css file;

#example > tbody > tr > td {
    white-space: nowrap;
}

will be;

#example > tbody > tr > td {
    word-break: break-all;
}

This change will break the line for long texts. And if you still want to change the width of a specific column, you should use columnDefs property of DataTables. Like;

"columnDefs": [{ "width": "200px", "targets": 3 }]

Modified example: Plunker

answered Apr 24, 2017 at 12:29

Emre Bolat

4,5626 gold badges31 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RoyBarOn Over a year ago

How can i set the size to be lower then 10px? all above 10 px works fine.... below 10 px - nothing is changing

Emre Bolat Over a year ago

It can't be lower than the header (Comments) width.

Collectives™ on Stack Overflow

How to set fixed width to Data tables columns?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related