Hidden tables made visible lose formatting

coreywi

Using version 1.10.18.

Steps to repro: create a page with multiple jQuery DataTables that are hidden/shown via v-show to a vue.js data variable. The initially 'shown' datatable looks fine. But when you switch to the second table, via a button press that shows it, the column formats are all wrong. If you change back to the originally working table, it's column widths are broken as well.

.columns.adjust().draw() does not appear to fix this.

http://jsfiddle.net/cardinal177/m7bzjsag/3/

Any suggestions very appreciated!

kthorngren

The general Datatables recommendation is to use style="width:100%" with the table tags. This allows Datatables to properly calculate the table and column widths. Update your test case and it seems to be working:
http://jsfiddle.net/4vz86x2r/

Kevin

coreywi

Thanks very much, Kevin. Cheers.