Bootstrap table won't fill container width

Html Problem Overview

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 with a title and table. For some reason, text fills the width of the container, but the table left aligns and only spans the width required by the text within. Anyone have any ideas? I know I can add in a width="100%" to the table, but this should be default bootstrap behaviour...

Cheers

<html>
  <head>
    <title>Page title</title>
    <link type="text/css" rel="stylesheet" href="bootstrap.min.css">
  </head>
  <body>

    <div class="navbar navbar-inverse navbar-static-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="index.html">Home</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse" >
          <ul class="nav navbar-nav">
            <li><a class="navbar-brand" href="modules.html">Modules</a></li>
            <li><a class="navbar-brand" href="sites.html">Sites</a></li>
            <li><a class="navbar-brand" href="search.html">Search</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="page-header">
        <h2>Why won't the table align!?</h2>
      </div>
      
      <div class="table-responsive">
        <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>
      </div>
    </div>
  </body>
</html>

Html Solutions

Solution 1 - Html

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>

Solution 2 - Html

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>

Solution 3 - Html

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

Solution 4 - Html

This solution worked for me:

just add another class into your table element: w-100 d-block d-md-table

so it would be : <table class="table table-responsive w-100 d-block d-md-table">

for bootstrap 4 w-100 set the width to 100% d-block (display: block) and d-md-table (display: table on min-width: 576px)

<div class="table table-responsive w-100 d-block d-md-table">
<table class="table">
 ---
</table>
</div>

Solution 5 - Html

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>

Solution 6 - Html

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.

Solution 7 - Html

Instead of using:

<div class="table-responsive">

you should use:

<table class="table table-responsive">

JSFiddle

Solution 8 - Html

In most simple words !!

> 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.

So for your requirement .table and .table-responsive will help you.

Content Type	Original Author	Original Content on Stackoverflow
Question	radpotato	View Question on Stackoverflow
Solution 1 - Html	Guillaume	View Answer on Stackoverflow
Solution 2 - Html	GuilPejon	View Answer on Stackoverflow
Solution 3 - Html	dbinott	View Answer on Stackoverflow
Solution 4 - Html	Chetankumar Akarte	View Answer on Stackoverflow
Solution 5 - Html	Philipp Dahse	View Answer on Stackoverflow
Solution 6 - Html	OrangeDog	View Answer on Stackoverflow
Solution 7 - Html	atastrumf	View Answer on Stackoverflow
Solution 8 - Html	Junaid	View Answer on Stackoverflow