How do I set the column width of some column width in datatables

Question

This is my data table.

I can't seem to control the width of any of the columns:

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": 'ajax/data/arrays.txt'
    } );

I have tried various methods here:

$('#example').dataTable( {
  "autoWidth": false
} );

And here:

$('#example').dataTable( {
  "columnDefs": [
    { "width": "20%", "targets": 0 }
  ]
} );

Without success.Can anyone advise me on how I can manually control the width of some individual columns? I am hoping it can be done using existing method in datatables.

Note: I will post a fiddle if I get a chance. fiddle here - It is not exactly the same, but if my understanding is correct, I should be abloe to control the column width here:

var table = $('#example').DataTable();

Answer 1

My experience is that columns.width mostly is suitable for relative intents, i.e "I want this column to be relatively larger". There is a lot that can inflict on each column width, and even if you carefully target each column with an exact percentage that add up to 100 you end up frustrated.

If you want exact, precise column width definitions there is no way around hardcoded CSS :

table.dataTable th:nth-child(1) {
  width: 20px;
  max-width: 20px;
  word-break: break-all;
  white-space: pre-line;
}

table.dataTable td:nth-child(1) {
  width: 20px;
  max-width: 20px;
  word-break: break-all;
  white-space: pre-line;
}

http://jsfiddle.net/6eLg0n9z/