Column Width Not Working In DataTables Bootstrap

Answer :

When setting columns widths, you also need to set:

autoWidth: false 

...on the DataTable itself

Would be nice to see your table in action, but I get a strong feeling that this is a pure matter of width of content. Elements with display: table-cell will try to expand in order to show as much as its content as possible without wrapping. For example, the width of the <th> that has the caption "Travel Protection", which you define as 10% - you would need a rather broad table to show "Travel Protection" within 10%.

So overrule the default word-wrap and word-break settings for <th> like this :

table.dataTable thead tr th {     word-wrap: break-word;     word-break: break-all; } 

a sort of demo (as said, cannot proof this to your table IRL) -> http://jsfiddle.net/9vbz7thp/

The best thing would be to adjust the content of the <th>'s so they fits to the hardcoded widths.

If it is the content of the <td>'s that grows too large (typically a loooong not breakable word) :

table.dataTable tbody tr td {     word-wrap: break-word;     word-break: break-all; } 

BTW: You do not need to define hardcoded widths in both <th> and <td>'s. <td>'s automatically get the width from the corresponding <th>.

 oTableDetails = $('#tblUserDetails').dataTable({     "autoWidth":false, 

is working for me