Displaying Responsive Tables that are not Full Width

MFG

I would like to display a table with no wrapping and collapsible columns (+/- buttons), and at the same time have the column sizes no wider than the length of the largest column item (either th or td).

I have been using the dt-responsive and nowrap classes on the table tag. I have tried removing style=width:100% and changing it to style=width:auto, with no impact.

Is this possible?

Thank You.

MFG

A table with a small number of columns demonstrates what I am trying to avoid.

Example here: http://live.datatables.net/kuyiqoku/8/edit

Is there a way to "auto-size" the column widths?

Thank You.

colin

Hi @MFG ,

I've updated the fiddle so that it now initialises the table correctly, see here, this will make it easier to understand,

Cheers,

Colin

allan

Thanks Colin!

The table has style="width:100%" on it. Also Bootstrap defines width:100% for the table.table elements.

To make the columns collapse, you need to use autoWidth (set to false) and override the Bootstrap defined table width: http://live.datatables.net/kuyiqoku/12/edit .

Allan

MFG

Thanks so much. You got me headed in the right direction.

Most of the work had to do with figuring out the proper Bootstrap Grid/Flex Classes to use in combination with the autoWidth Option and CSS override you referenced.

The look I am going for can be seen here: http://live.datatables.net/jemeteko/1/edit
View the Output Tab only.

Thanks Again!
Michael.