Table in Bootstrap tab not resizing when tab shown

philipstratford

I've got a classic case of a DataTables table not being displayed correctly when contained in a Bootstrap tab pane when that pane is not visible when the page loads. Per the suggested solution documented here, I've added an event listener for the tabs' shown.bs.tab event and am calling the .columns.adjust() function. However, even though I've proven that the event is firing as expected and that the DataTable.tables({ visible: true, api: true }) object definitely contains my table, the table is not resized when as expected when the tab is shown.

I've been able to replicate the problem in this fiddle using the sample code for Bootstrap tabs from their docs and the sample code for the solution from the DataTables page linked above.

As you can see by testing the fiddle, when the Test Table tab is shown, the table within is not resized. I've added a line to write to the console the number of tables found by the DataTable.tables({ visible: true, api: true }) command, again to prove that an API instance containing the table is being created as expected.

Am I doing something wrong or is this a bug?

kthorngren

Add style="width:100%" to the table tag as shown in this example. Updated fiddle:
https://jsfiddle.net/f1Lks940/

Kevin