Column width not working in DataTables bootstrap

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

The only thing that worked for me was setting an inline min-width on the column header:

    <table width="100%">
        <tr>
            <thead>
                <th>Ref</th>
                <th style="min-width: 100px">User</th>
                <th>Organisation</th>
            </thead>     
        </tr>
        ...
    </table>

When setting columns widths, you also need to set:

autoWidth: false

...on the DataTable itself