Full Width Bootstrap Table Too Big

Dalder

Hello,

I am using Datatables with bootstrap.

Please see my example here: http://live.datatables.net/januxuti/1/

Before Datatables is called, the table sits nicely at 100% width and everything is well.

Once it is called, as you will see in the example, a horizontal scrollbar appears and there is some sort of padding being applied.

I have tried to remove it in the CSS but it doesn't seem to help.

Any ideas?

Many thanks,

Dan

allan

Hi Dan,

I'm not actually seeing the issue on that link - the table seems to fit into the space available nicely. However, try adding width="100%" to your table HTML which will tell DataTables to resize to fit automatically.

Allan

gyrocode

You need to wrap your content in <div class="container-fluid"></div> or <div class="container"></div> with Bootstrap.

See updated example for code and demonstration.

---

See more articles about jQuery DataTables on gyrocode.com.

Dalder

Hi Allan,

When I view that link on my machine (Windows 7, Chrome 59) I get a padding on the right hand side of the table, even though to table is 100% of the view width. That means the white padding is off screen with a horizontal scroll bar. Bizarre that you can't see it.

Gyrocode, I had to add another class to remove the padding on the side of the table, but this does the trick for me.

I'll mark your answer as the solution, although I still feel there is something else untoward going on.

Thanks,

Dan

allan

Sorry - I missed the scrollbar at the bottom of my window. Seeing that, then yes, I can see the padding issue. As gyrocode rightly says that's from Bootstrap. The table is setup as a container element, so Bootstrap puts padding around it to make it fit into its grid correctly. Adding the container class is the right thing to do.

Allan