Bootstrap table won't fill container width

Question

I\'m writing a web site using bootstrap (3.3.2) with a simple table on one of the pages. I just have a simple header panel in one container, and another content container w

Answer 1

The accepted answer is incorrect. Per the docs

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

Then goes on to show proper usage

<div class="table-responsive">
   <table class="table">
     ...
   </table>
</div>

You should also have the .table class on the <table>

http://getbootstrap.com/css/#tables-responsive

Answer 2

Even responsive tables do not expand to fit the container if the container is large. There is no Boostrap table configuration to make that happen.

The simplest way, if you want to use Bootstrap classes, is to add w-100. Otherwise, use a single-column grid layout.

Answer 3

Instead of using:

<div class="table-responsive">

you should use:

<table class="table table-responsive">

JSFiddle

Answer 4

Try to add bootstraps class "table" to the tag.

    <table class="table">
      <thead>
        <th>Head1</th><th>Head2</th><th>Head3</th>
      </thead>
      <tbody>
        <tr>
          <td>Body1</td><td>Body2</td><td>Body3</td>
        </tr>
        <tr>
          <td>Body1</td><td>Body2</td><td>Body3</td>
        </tr>
        <tr>
          <td>Body1</td><td>Body2</td><td>Body3</td>
        </tr>
      </tbody>
    </table>

Answer 5

It's because you are not following the Bootstrap documentation indications on responsive tables. You have to wrap your table element with .table class in a wrapper <div> with the .table-responsive class, like this:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Answer 6

NOTE: If you're using bootstrap v4 alpha, even though the documentation says that you can use:

<table class="table table-responsive">
  ...
</table>

I still had to use the accepted answer to make it fill the container's width:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>