表格宽度太大，折叠和引导 3答案

【问题标题】：table width too large with collapse and bootstrap 3表格宽度太大，折叠和引导 3
【发布时间】：2015-04-21 17:17:04
【问题描述】：

我正在使用 bootstrap 3 并有一些折叠表。问题是当表格可见（折叠）时，表格大于内容（您可以使用浏览器检查工具查看），因此出现了新的不需要的边框。

如果我删除折叠类或引导导入，问题就会消失，所以它一定是引导添加的，但我不知道如何正确覆盖它。

有人想删除那个边框吗？如果您知道如何隐藏它，即使宽度保持较大，这对我的实际使用来说也不是问题。

这是我的代码：

th,
td {
  padding: 10px;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<table border="1" id="collapse_FR24" class="collapse in" style="">
  <tr>
    <th>Year</th>
    <th>Value</th>
  </tr>
  <tr>
    <td>1995</td>
    <td>26589.3</td>
  </tr>
  <tr>
    <td>1996</td>
    <td>26756.3</td>
  </tr>
  <tr>
    <td>1997</td>
    <td>26223</td>
  </tr>
</table>

【问题讨论】：

标签： css twitter-bootstrap width border

【解决方案1】：

我终于做到了，我在我的桌子周围添加了一个 div 并在 div 而不是桌子上折叠：

th,
td {
  padding: 10px;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="collapse_FR24" class="collapse in">
  <table border="1">
    <tr>
      <th>Year</th>
      <th>Value</th>
    </tr>
    <tr>
      <td>1995</td>
      <td>26589.3</td>
    </tr>
    <tr>
      <td>1996</td>
      <td>26756.3</td>
    </tr>
    <tr>
      <td>1997</td>
      <td>26223</td>
    </tr>
  </table>
</div>

【讨论】：