I'm trying use CSS to set a min-width
for my columns, but when I do this the table's responsiveness is broken. I've tracked the problem down to the _resizeAuto()
in the Responsive plugin.
The problem is the code creates a clone of the table and the headers and strips the min-width
from the clone. When it does this, the minWidth
property it calculates for each column ends up being different than the CSS enforced min-width
actually on the table.
When _columnsVisiblity()
runs, it's calculations end up all being wrong, so the columns do not resize and hide based upon the actual min-width of the column.
If I change the following lines in the _resizeAuto()
function:
var headerCells = dt.columns()
.header()
.filter( function (idx) {
return dt.column(idx).visible();
} )
.to$()
.clone( false )
.css( 'display', 'table-cell' )
.css( 'min-width', 0 );
... and remove the css( 'min-width', 0 )
to make it:
var headerCells = dt.columns()
.header()
.filter( function (idx) {
return dt.column(idx).visible();
} )
.to$()
.clone( false )
.css( 'display', 'table-cell' );
The code works as expected.
Why is it overriding the min-width
property?
Is this something that can be changed?
Is there a better way to set a minimum width for a column?