table 宽度过大且折叠 bootstrap 3

Question

我正在使用 bootstrap 3 并且有一些崩溃 tables。问题是当 table 可见（折叠）时，table 比内容大（您可以使用浏览器检查工具看到它），因此有一个新的不需要的边框。

如果我删除 collapse class 或 bootstrap 导入问题消失，所以它一定是 bootstrap 添加的东西，但我不知道如何正确覆盖它.

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

这是我的代码：

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>

Answer 1

我终于设法做到了，我在 table 周围添加了一个 div 并在 div 而不是 table 上进行折叠：

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>

table 宽度过大且折叠 bootstrap 3

table width too large with collapse and bootstrap 3

css

twitter-bootstrap

width

border