Problem with responsive: datatable inside a html table

usrtt

Hi,

I'm trying to place a datatable inside a cell of a regular table, but the problem is that very few columns get hidden automatically when the size of the screen is reduced. (I'm forced to do so because It is a legacy application and the layout is made with tables)

Example: http://live.datatables.net/kiqabomi/1/edit

If you try this you can see that an horizontal scroll is present and very few columns got hidden.

Any ideas ?

Thank you!

allan

This comes about from how tables work in the browser. "width:100%" you might think means what it says, but actually the browser will happy add extra space to it if it needs it for the display. Since the inner table is white-space:nowrap it takes up a lot of space, which results in the issue you are seeing.

The one way around this is to use table-layout:fixed on the outer table, which tells the browser you actually mean width:100%. Updated example: http://live.datatables.net/kiqabomi/2/edit .

Having said that, a better option is not to use a wrapper table to be honest.

Allan

allan

This comes about from how tables work in the browser. "width:100%" you might think means what it says, but actually the browser will happy add extra space to it if it needs it for the display. Since the inner table is white-space:nowrap it takes up a lot of space, which results in the issue you are seeing.

The one way around this is to use table-layout:fixed on the outer table, which tells the browser you actually mean width:100%. Updated example: http://live.datatables.net/kiqabomi/2/edit .

Having said that, a better option is not to use a wrapper table to be honest.

Allan