Question

使用bootstrap的折叠功能，我希望得到一个表格的行来扩展并显示更多细节。

当点击一行时，由于某种原因，其他列会略微移动。这似乎与细节的长度有关，但我无法找到旁路。

<table class="table">
  <thead>
    <tr>
      <td>title 1</td>
      <td>title 2</td>
      <td>title 3</td>
    </tr></thead>
  <tbody>
    <tr>
      <td data-toggle="collapse" href="#rowID">other columns move when you click me</td>
      <td>im second </td>
      <td>im third</td>
    </tr>
    <tr>
      <td colspan="3">
        <div class="collapse" id="rowID">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>           
        </div>
      </td>
    </tr>
  </tbody>
</table>

你可以在这个bootply示例中看到问题： https://www.bootply.com/HJfNNB5CPs

单击红色文本时，请注意其他列。

Answer 1

我不确定为什么会这样，但如果您明确设置包含可折叠元素的td的宽度，它似乎就会解决。

td[colspan="3"] {
  width: 100%;
}

updated bootply

为什么我的表格列在触发Bootstrap崩溃时会发生变化？

1 个答案: