Table header's inline styles

tnanek

I am struggling to write CSS rules to take care of my column widths. I finally narrowed it down to my selectors getting there, but the inline properties are overriding it. Below shows my attempts.

I can resize the actual data display just fine, its the header that I'm having issues with (which is already loaded in the table within a thead item).

My initialization:

[code]
$('#example').DataTable( {
'bAutoWidth': false,
'oLanguage': {
'sEmptyTable': 'No enties found'
},
'aaData': data,
'aoColumnDefs': [
{'sWidth': '', 'aTargets': [0,1,2,3] }
],
'aoColumns': [
{'mData': 'PROPERTY_1'},
{'mData': 'PROPERTY_2'},
{'mData': 'PROPERTY_3'},
{'mData': 'PROPERTY_4'},
]
} );
[/code]

My css:

[code]
/** First th and first column of the Example page **/
#example_wrapper .dataTables_scrollHead table th:first-child,
#example td:first-child {
overflow:hidden;
width: 10%;
background-color:#000000 !important;
}
/** Second th and second column of the Example page **/
#example_wrapper table th:first-child+th {width:70% !important;}
#example_wrapper table td:first-child+td {
overflow:hidden;
width: 70%;
}
/** Third th and third column of the Example page **/
#example_wrapper .dataTables_scrollHead table th:first-child+th+th{width:10%;}
#example td:first-child+td+td {
overflow:hidden;
width: 10%;
}
/** Fourth th and fourth column of the Example page **/
#example_wrapper .dataTables_scrollHead table th:first-child+th+th+th,
#example td:first-child+td+td+td {
overflow:hidden;
width: 10%;
}
[/code]

allan

If you want to stop DataTables adding the inline styles, you'd need to comment out a line in the DataTables script. It uses inline styles to try and make the columns align over pages. This isn't always possible since different pages have different content and thus force different widths. Pixel perfect alignment with a table is impossible without using `table-layout:fixed` .

Beyond that, we'd need a link to your page to see why exactly the DataTables default width handling isn't working.

Allan

tnanek

Okay, the specific issue I'm having here is that on page load, the header items are not of the correct width. It seems to reset itself once I click to sort manually, but not with a .click() call, so I figured the solution would be to use css, and style each instance of DataTables. I just tried to invoke fnDraw() on the table after creation, with no luck.

In my other invocation of DataTables, they are fine when there's data in the table, its only an issue when there isn't any data, but I haven't investigated the inline styles for that one yet.

Right now I'm seeing inline styles for the header items.
[code]

...


...


...


...

[/code]

Upon clicking for a sort, they reset to what they should have been earlier, to match the columns below:
[code]

...


...


...


...

[/code]

I will try to recreate the issue in jsbin by the end of the day.

allan

Sounds like the table is hidden when you initialise it? You'd need to call fnAdjustColumnSizing when you make it visible.

Allan

tnanek

Yes, it is; all the pages are hidden until the loading of the data (and thus the initialization as well) are complete. I'll tweak the code to include an fnAdjustColumnSizing() call for any datatables on any of the pages as it is initially displayed.

Looks like this will do the trick, thanks for the amazing package!