CODEWITHSUNDEEP
twitter-bootstrap
Rick Button
Rick Button

Reputation: 1212

Twitter bootstrap table extends outside container on right

I have a table inside of a Twitter Bootstrap, and when the table has a lot of columns (around 19-20 depending on whats inside them) it extends outside of the .container.

twitter bootstrap table

The hr tag (gray line underneath table) defines the edges of the .container. The table always extends past it to the right.

Is it possible to center the table, so that it extends outside the .container on both sides equally?

Upvotes: 5

Views: 5133

Answers (2)

K K
K K

Reputation: 18109

Try:

.table{table-layout:fixed}

Demo: http://jsfiddle.net/GCu2D/4889/

Upvotes: 1

undefinedvariable
undefinedvariable

Reputation: 696

I had the same problem. It turned that the container's width was smaller than the table's width. If you're using Chrome, the Developer tools are pretty awesome.

I just set it to larger than my table's width, as a temporary fix. My table's width is current 1079px.

.container { width: 1200px; }

When I increased the table's width to 1132px it started to drift to the right again. I'm going to try decreasing the width of the contents, but it's a difficult problem. Collapsible columns are probably a thing and there's horizontal scroll, but that just seems like more barriers to the data.

Upvotes: 2

Related Questions