Data table is not properly resizing horizontally when the browser width is decreased.

mdorsa

Hi, I'm experiencing the following issue using DataTables v1.10.15:

The data table correctly resizes horizontally when the browser's width is increased, but does not resize correctly when the browser's width is decreased (in which case the data table's right edge extends past the browser's right edge resulting in the browser displaying a horizontal scroll bar).

Note that changing the outer <table> to a <div> resolves the issue, however that change would affect the layout of too many UI pages, so I'm wanting a resolution that keeps the outer <table> in place.

Here is a live example:
http://live.datatables.net/leronije/1/edit

Thank you!
Marc

kthorngren

Not sure its a good option but you could set wapping to break words. For example:

table{
    table-layout: fixed;
}
td{
    word-wrap:break-word
}

Kevin

mdorsa

Thanks Kevin, but that is not an option for us. Our data tables can contain all kinds of elements, not just text.

kthorngren

Maybe you want something like the Responsive extension?
https://datatables.net/extensions/responsive/

If not, then maybe you can describe how you want the table to shrink.

Kevin

mdorsa

Actually, I tried using the Responsive extension and it did not resolve the issue.

Here is how I want the data table to behave when the browser width is reduced:
http://live.datatables.net/xegiyuyo/1/edit

(The only difference from the "problem" live example is changing the outer <table> to a <div>.)

kthorngren

I think I understand now. You want a table within a table and for that inner table to have its own horizontal scroll bar. Something that scrollX should provide but doesn't seem to for the inner table.

I'm sorry but I don't know why scrollX doesn't work for the inner table.

Kevin

mdorsa

Well, sort of. I only want a horizontal scroll bar to display in the data table itself if absolutely necessary. Note in my "correct" live example above, there is no horizontal scroll bar displayed (either by the browser or by the table), unless you really shrink the width of the browser. The outer div (with id "dataTableContainer" and CSS width of 95%) always maintains its 95% width relationship with the browser's width, whether the browser's width is increased or decreased. The data table itself (with id "example") has an attribute of "width=100%" and always fills the width of the dataTableContainer div.

allan

Try:

#dataTableContainer,
#dataTableContainer>tbody,
#dataTableContainer>tbody>tr,
#dataTableContainer>tbody>tr>td {
  display: block;
}

http://live.datatables.net/leronije/3/edit

Basically makes the outer table look like a div to the browser. A total hack, but it might be good enough for you?

Allan

mdorsa

Hi Allan,

Yes this looks very promising. Thank you so much!

Marc

mdorsa

Yes this "hack" worked beautifully (along with a number of necessary layout tweaks)...woo-hoo!