bootstrap4 datatable wider than page

tineyes

I just took the official example of datatable in bs4 style. The table is slightly wider than the page itself. There is a horizontal scrollbar that won't go away. I have table width set to 100%. Tested in both chrome and firefox.

See the code and live demo here: https://jsfiddle.net/tineyes/ahex87qz/4/show

It seems to be a bug. Please check and advise. Thanks

kthorngren

You can put it into a container class div or something else that you like. For example:
https://jsfiddle.net/qha0nL54/

Kevin

tineyes

Thanks. I assume you meant bootstrap container classes. Apparently it solves the problem. But I still feel there is bug in datatable implementation. In my first example, the table was going wider than the page. When using container, it might go wider than the parent div (especially in smaller viewports).
I would request developers to investigate the issue further.

allan

As always Kevin is absolutely spot on. The is caused by the way Bootstrap grids and containers work. From their docs:

Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.

Which is exactly what is happening in your example. The div.row has a margin left/right of -15px, which is what is causing the overflow of the document horizontally.

You can see that effect without DataTables - here is a little example which shows the effect without DataTables.

That's just the way Bootstrap works.

Allan

tineyes

Great explanation. I suggest updating your bs4 example with a container div.