Question

我正在尝试使用Twitter Bootstrap中的折叠功能，以便在表格中显示一条额外的行，其中一个单元格占据了表格的整个宽度...当上面一行中的按钮显示该行点击。

问题是：如果没有折叠功能，使用colspan属性，“额外行”具有良好的宽度，但是在功能正在运行时，colspan属性似乎没有效果，线条保持在上面一行的第一个单元格的宽度。

<table>
    <thead>
        <tr>
            <th></th>
            <th>content</th>
            <th>content</th>
            <th>content</th>
            <th>content</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
            <button data-toggle="collapse" data-target="#collapsible">Develop</button>
            </td>
            <td>content</td>
            <td>content</td>
            <td>content</td>
            <td>content</td>
        </tr>
        <tr id="collapsible" class="collapse">
            <td colspan="5">
                Collapsible content
            </td>
        </tr>
    </tbody>
</table>

问题是什么以及如何解决？

Answer 1

我通过在我想要折叠的单元格中放置一个div并将类collapsible附加到其中来解决了这个问题。

Answer 2

此页面上的其他解决方案都不适用于我，但是我在这里找到了答案：https://stackoverflow.com/a/21939080/2378910

（我不想接受信用，所以请改为投票！）

它说：

要折叠表格行，您应该为折叠后写入额外的css 行：

table .collapse.in {
    display: table-row !important;
}

它将在行展开后修复显示问题。

Twitter Bootstrap：可折叠的表格线宽与colspan

2 个答案: