Corey Wu
Corey Wu

Reputation: 1159

Bootstrap matching table width with container

How can I match my table's width with its container? Without any css changes, my table overflows and is much wider than its container.

JSFiddle example: http://jsfiddle.net/Tet8L/ Table is overflowing out of container.

When I mess around with setting the width to auto, I get a table that fills only part of the container.

.table {
  width: auto; (or fixed or none)
}

JSFiddle example: http://jsfiddle.net/DDnSL/ Table width is too short.

Is there a way to get my table to automatically fill the entire container?

Upvotes: 1

Views: 1798

Answers (1)

Sebsemillia
Sebsemillia

Reputation: 9476

In your html you have

<div class="starter-template">
     <div class="container">
         ...
     </div>
</div>

Change this to

<div class="starter-template">
     <div class="container-fluid">
         ...
     </div>
</div>

Working Example

UPDATE:

Forget what I just wrote, just get rid of the .container div, because you already have a .container div in your code. I just had a look at the Bootstrap docs and they say,

containers are not nestable by default

Bootstrap Docs (containers)

<div class="starter-template">
     <div>
         ...
     </div>
</div>

Updated Example

Upvotes: 2

Related Questions