容器div中的引导表超出浏览器宽度

Question

我有一个boostrap containerdiv，里面有一张桌子：

<table id="reviewer_table" class="table table-hover table-striped table-condensed tasks-table">
<thead>
  // tr/td ... 
</tbody>
</table>

但是由于某种原因，该表太宽了，实际上一列不在右侧屏幕之外。

我不确定是什么原因引起的，所以我在共享代码以了解我做错了什么。

Answer 1

请在表格前添加以下div

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

Answer 2

我也遇到了这个问题。我认为当表格中的内容（如长字符串）延伸得比容器宽时会发生这种情况。CSS-Tricks 的这篇文章帮助我理解了。

为了修复它，我添加了固定到我的 CSS 的表格布局，<table>例如（我只为一个具有 类的用例指定了这个speaker-list）：

table.speaker-list {
  table-layout: fixed;
}

它默认为等宽列，因此您可以在表格标题上放置类<th>以指定不同的宽度，例如 10% 与 40%。CSS-tricks 文章有很好的例子。

Answer 3

table-responsive在表的父div中添加一个类以创建响应表。

Answer 4

也许发布你的表的整个代码，因为它非常适合我。

<div class="container">
  <table id="reviewer_table" class="table table-hover table-striped table-condensed tasks-table">
  <thead>
    <tr>
      <th>Username</th>
      <th>Password</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>asdsada</td>
      <td>asdsada</td>
      <td>asdsada</td>
    </tr>
    <tr>
      <td>asdsada</td>
      <td>asdsada</td>
      <td>asdsada</td>
    </tr>
    <tr>
      <td>asdsada</td>
      <td>asdsada</td>
      <td>asdsada</td>
    </tr>
    <tr>
      <td>asdsada</td>
      <td>asdsada</td>
      <td>asdsada</td>
    </tr>
  </tbody>
  </table>
</div>

在这里尝试一下：jsfiddle.net