Таблица загрузки не заполняет ширину контейнера

Я пишу веб-сайт, используя bootstrap (3.3.2), с простой таблицей на одной из страниц. У меня просто простая панель заголовка в одном контейнере и еще один контейнер содержимого с заголовком и таблицей. По какой-то причине текст заполняет ширину контейнера, но таблица слева выравнивается и охватывает только ширину, требуемую текстом внутри. У кого-нибудь есть идеи? Я знаю, что я могу добавить в таблицу ширину = "100%", но это должно быть поведение загрузки по умолчанию...

Приветствия

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

Ответы

Ответ 1

Это потому, что вы не следуете указаниям документации Bootstrap по адаптивным таблицам. Вы должны обернуть table элемента с .table класса в обертке <div> с .table-responsive классом, как это:

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

Ответ 2

ПРИМЕЧАНИЕ. Если вы используете bootstrap v4 alpha, даже если документация говорит, что вы можете использовать:

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

Мне все же пришлось использовать принятый ответ, чтобы он заполнил ширину контейнера:

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

Ответ 3

Попробуйте добавить к тегу класс "таблица" bootstraps.

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

Ответ 4

Принятый ответ неверен. В документах

Создайте адаптивные таблицы с помощью упаковки любой .table в .table-responseive, чтобы заставить их прокручивать по горизонтали на небольших устройствах (под 768px). При просмотре на большом, чем 768 пикселей, вы не увидите различий в этих таблицах.

Далее показывается правильное использование

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

Вы также должны иметь класс .table на <table>

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

Ответ 5

Вместо использования:

<div class="table-responsive">

вы должны использовать:

<table class="table table-responsive">

JSFiddle

Ответ 6

В самых простых словах!

Создайте отзывчивые таблицы, обернув любой .table в .table-responsiveчтобы они прокручивались по горизонтали на небольших устройствах (под 768px). когда просмотр на чем-то большем, чем 768px широкий, вы не увидите никаких разница в этих таблицах.

Итак, для вашего требования .table и .table-responsive вам поможет.

Ответ 7

Даже адаптивные таблицы не расширяются, чтобы соответствовать контейнеру, если он большой. Для этого не существует конфигурации таблицы Boostrap.

Самый простой способ, если вы хотите использовать классы Bootstrap, это добавить w-100. В противном случае используйте сетку с одним столбцом.