Column widths don't match up in Safari 6.1

lukekarrys

http://jsfiddle.net/gQA23/7/embedded/result/

The above link is my reduced test case with Twitter Bootstrap 2.3.2 and Datatables. I am trying to set all columns to 100px using aoColumnDefs but in Safari the widths are not 100px.

My main code is

[code]
$('.avails-table').dataTable({
sScrollX: '100%',
sScrollY: '100%',
bPaginate: false,
bFilter: false,
bInfo: false,
bSort: false,
aoColumnDefs: [{
sWidth: '100px',
aTargets: ['_all']
}]
});
[/code]

These images show my screenshots:

Chrome Version 30.0.1599.101
http://cl.ly/image/1B37462v1c0e

Version 6.1 (8537.71)
http://cl.ly/image/0s1e0b3M3r2H

lukekarrys

Note that the same thing happens in iOS7 Mobile Safari.

allan

Unfortunately I don't have Safari 6.1 to hand at the moment, so I can't actually test this just now, but I will do so when I get back to my laptop. Thanks for the link to the test case.

Allan

lukekarrys

Thanks Allan. For now I do have a workaround, but it's a pretty ugly hack. Inside each th and td I add

[code]

// Contents

[/code]

This works for me since I want every cell to have the same height and width, but wouldn't work in variable height/width cases.

allan

It would appear that this is due to Bootstrap 2 setting `table { max-width: 100% }` . Safari 6.1 appears to do exactly that. Setting `table.dataTable { max-width: none !important; }` fixes it.

This is actually in the DataTables bootstrap 2 integration file already: https://github.com/DataTables/Plugins/blob/master/integration/bootstrap/2/dataTables.bootstrap.css#L26 .

Allan