Question

我正在使用bootstrap（3.3.2）编写一个网站，其中一个页面上有一个简单的表格。我只在一个容器中有一个简单的标题面板，另一个包含标题和表的内容容器。由于某种原因，文本填充容器的宽度，但左边的表格对齐并且只跨越文本所需的宽度。有人有主意吗？我知道我可以在表中添加width =“100％”，但这应该是默认的bootstrap行为......

干杯

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

Answer 1

这是因为您没有关注responsive tables上的Bootstrap文档指示。您必须将带有table类的.table元素包装在带有<div>类的包装器.table-responsive中，如下所示：

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

Answer 2

注意：如果您正在使用bootstrap v4 alpha，即使documentation表示您可以使用：

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

我仍然必须使用接受的答案来填充容器的宽度：

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

Answer 3

而不是使用：

<div class="table-responsive">

你应该使用：

<table class="table table-responsive">

JSFiddle

Answer 4

尝试添加bootstraps类＆＃34; table＆＃34;标签。

    <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

接受的答案不正确。根据文档

通过打包在.table-responsive中的任何.table创建响应式表格，使它们在小型设备（768px以下）上水平滚动。在大于768像素宽的任何物体上观看时，您将看不到这些表格的任何差异。

然后继续显示正确的用法

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

您还应该在.table

上拥有<table>课程

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

Answer 6

用最简单的话来说!!

通过在.table中包装任何.table-responsive来创建自适应表格使它们在小型设备上水平滚动（在768px下）。什么时候在大于768px宽度的任何东西上观看，你将看不到任何东西这些表中的差异。

因此，根据您的要求，.table和.table-responsive会对您有所帮助。

Answer 7

即使容器很大，响应式表也不会扩展以适合该容器。没有Boostrap表配置可以做到这一点。

如果要使用Bootstrap类，最简单的方法是添加w-100。否则，请使用单列grid layout。

Answer 8

此解决方案对我有用：

只需将另一个类添加到表元素中： 615862116620550

因此它将是： w-100 d-block d-md-table

对于引导程序4 <table class="table table-responsive w-100 d-block d-md-table"> ，将宽度设置为100％ w-100 （显示：阻止）和 d-block （显示：最小宽度为576px的表格）

d-md-table

Bootstrap表不会填充容器宽度

8 个答案: