Menu
I'm working on a project using twitter bootstrap. We have a table that has lots of columns and is going to be larger than the browser window almost every time.
This is what happens on the right :
The table border stays in the browser window, while the table contents do not. If I scroll, the borders stay where they are, they do not "follow" the browser window.
You can see the problem on this jsfiddle. It works on Safari, not on Chrome or Firefox.
The layout is like this :
<body> <div class='container-fluid'> <div class='row-fluid'> <div class='span1'> ... menusidebar here... </div> <div class='span11'> <table class="table table-striped table-bordered" style="white-space: nowrap"> <thead> <tr> </tr> </thead> <tbody> <tr> </tr> </tbody> </table> </div> </div> </div> </body> I hope you can help me. If you need more information, just ask, I'd be glad to supply.
This is a Rails 3.2 app, using the gem bootstrap-sass in version 2.2.1.1 (the problem appears in 2.2.2.0 too). The first three numbers reflect the bootstrap version.
321
Add . w-auto class to the table element to set an auto width to the table column. The width of the columns will automatically adjust to the content of the column. That means it will always take a minimum width required to present its content.
You can make any table responsive across all viewports by wrapping a . table with . table-responsive class. Or, pick a maximum breakpoint with which to have a responsive table up to by using .
This was the only solution that worked for me...
.table { max-width: none; table-layout: fixed; word-wrap: break-word; }
52
If you are on Bootstrap 3, another approach is to wrap your table in a
<div class="table-responsive"><table>...</table></div> This makes the table responsive.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
