How to properly setup a responsive table?

ibgd

I enabled responsive:

{ responsive: true; }

This technically works, as the columns will start to auto hide on page resize. However this triggers two issues:

1. The table width is given a fixed size, which breaks the layout.
2. The hiding of the columns only seem to happen on resize, and not when the page loads. So when I reload the page, all columns are there.

I read several times the docs, but can't seem to understand what's the proper behavior. I know I can setup breakpoints, but that still sets a fixed width to the table. I would like to keep the table size at 100%. I tried forcing the size via css !important, but that just breaks the hiding of the columns.

The docs show, severals responsive options, but fail to show these options showing together.

Thank you.

allan

The table width is given a fixed size, which breaks the layout.

Add width="100%" or style="width:100%" to your HTML attributes for the table.

The hiding of the columns only seem to happen on resize, and not when the page loads

Can you link to a page showing the issue please. It appears to work as expected here on load.

Allan

ibgd

style="width:100%" did not work (get's overwritten) but width="100%" worked.

Thanks for the info.

allan

It will get overwritten, but the fact that it exists when the DataTable is initialised should be enough to let DataTables set an internal flag.

However, good to hear you have it working.

Allan