Question

我有一个boostrap container div，在里面，我有一张桌子：

<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

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

Answer 3

我也遇到过这个问题。我认为当表中的内容（如长字符串）比容器的宽度更大时，会发生这种情况。 CSS-Tricks的This post帮助我理解。

为了解决这个问题，我为<table>添加了固定到我的CSS的表格布局（我只为一个speaker-list类的用例指定了这个：

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

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

Answer 4

引导程序4：在表元素中添加表响应型，它将使表保留在div内。表格将变为水平滚动

<table class="table table-responsive">

Answer 5

也许发布你桌子的整个代码，因为它对我来说非常合适。

<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

Answer 6

   **everything worked fine.**

      <div class="container">
       <table id="reviewer_table" class="table table-hover table-striped 
          table-condensed tasks-table">
         <thead>
            <tr> 
              <td>abc </td>
              <td> def</td>
              <td> ghi </td>
            </tr>
         </thead>

         <tbody>
           <td> jkl</td>
           <td> mno </td>
           <td>pqr</td>

        </tbody> 
        <tbody>
          <td> asdf</td>
          <td> adfd </td>
          <td>dfdf</td>

       </tbody> 


     </table>

    </div>


      [OUtput][1]

      [1]: https://i.stack.imgur.com/IrCMK.jpg

容器div内的bootstrap表超出浏览器宽度

6 个答案: