Reputation: 442
We're using jQuery DataTables to display some table data. We're also using the "Show / hide columns" option dynamically (https://datatables.net/examples/api/show_hide.html)
The issue is we're using CSS nth-child
logic to align/format some columns, but when we hide a column with jQuery, all the nth-child
logic is now off by the column that was hidden.
Please see this jsFiddle for demonstration of the problem.
Is there a way to adjust all nth-child
css values?
Upvotes: 0
Views: 239
Reputation: 58930
SOLUTION
Avoid using nth-child
in this case. Instead assign class names to the columns with columns.className
and target specific columns using class names instead.
JavaScript
var table = $('#example').DataTable( {
"columnDefs": [{
"targets": 3,
"className": "col-age"
}]
} );
CSS
#example td.col-age {
text-align:right;
}
DEMO
See updated jsFiddle for code and demonstration.
Upvotes: 3