CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Rhs
Rhs

Reputation: 3318

Table Inside Bootstrap Grid Goes Beyond the Grid

This might be hard to explain.

See plunker: http://plnkr.co/edit/kSMeYCHjVuXyvy9Uvkdg?p=preview

This is to mock an application that I am working on.

In col-xs-2, I have a side panel/menu. In col-xs-10, I have a table that displays user for the data. (Btw, the word Honorificabilitudinitatibus is some long word that I got from wikipedia.

The problem is that because my table has too much content or the words are too long, the table is extending beyond the row div, which I highlighted with a red border.

I would like everything to be within the red border (or the red border to grow as the table becomes larger). How do I do this in bootstrap?

Thanks

Upvotes: 1

Views: 5109

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362810

The Bootstrap row is meant to placed inside a container as a result it contains negative margins which are causing your table to extend beyond.

So you should place the row div in a .container-fluid...

http://bootply.com/PTS4QZHgl8

Upvotes: 0

biggles
biggles

Reputation: 3061

As @Joseph Marikle suggests, you should look at the responsive tables feature provided with bootstrap. They have most likely worked out a lot of issues that are associated with this.

However, you can use the CSS property table-layout along with a 100% width to achieve this.

table {
  width: 100%;
  table-layout: fixed;
}

Upvotes: 5

Related Questions