Bootstrap折叠与响应表布局发生干扰

Question

我早先提出了一个与此相关的问题，但我意识到我在叫错树，所以我要重新开始。我不知道为什么昨天这成了一个问题，但我已经能够在 jsFiddle - http://jsfiddle.net/dspitzle/22Sr5/4/ 上重现它。我有两个不同的表格实例（代码包含在下面），唯一的区别是我分配了class='requests_targets collapse in' 的 thead 和 tbody 标签以启用折叠功能（使用标题中的 V 形按钮）。具有折叠类的类全部被压扁，因此显然响应式表结构正在被覆盖。

在 Fiddle 上，您会注意到当您折叠部分时（在它们消失之前），表格布局会自行纠正。这到底是怎么回事？您可以看到我包含的唯一 CSS 和 Javascript 是 jquery 和 bootstrap 文件，以及一个用于切换按钮上 V 形的功能。

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div class="table-responsive">
                <table class="table table-striped table-condensed" id='request_header'>
                    <caption class="h2">Outstanding Requests [1]
                        <button class="btn section-toggle btn-default btn-sm" data-toggle="collapse" data-target=".requests_targets"><span class="icon_toggle glyphicon glyphicon-chevron-up"></span>
                        </button>
                    </caption>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Date</th>
                            <th>Service</th>
                            <th>Status</th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>LastName, FirstName</td>
                            <td>2/28/2014</td>
                            <td>Books/Toys</td>
                            <td>In Progress</td>
                            <td><a href="#" class="btn btn-default btn-sm" \=""><span class="glyphicon glyphicon-pencil"></span></a>
                            </td>
                            <td><a href="#" class="btn btn-default btn-sm" \=""><span class="glyphicon glyphicon-pencil"></span> Child</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="col-sm-12">
            <div class="table-responsive">
                <table class="table table-striped table-condensed" id='request_header2'>
                    <caption class="h2">Outstanding Requests [1]
                        <button class="btn section-toggle btn-default btn-sm" data-toggle="collapse" data-target=".requests_targets"><span class="icon_toggle glyphicon glyphicon-chevron-up"></span>
                        </button>
                    </caption>
                    <thead class="requests_targets collapse in">
                        <tr>
                            <th>Name</th>
                            <th>Date</th>
                            <th>Service</th>
                            <th>Status</th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody class="requests_targets collapse in">
                        <tr>
                            <td>LastName, FirstName</td>
                            <td>2/28/2014</td>
                            <td>Books/Toys</td>
                            <td>In Progress</td>
                            <td><a href="#" class="btn btn-default btn-sm" \=""><span class="glyphicon glyphicon-pencil"></span></a>
                            </td>
                            <td><a href="#" class="btn btn-default btn-sm" \=""><span class="glyphicon glyphicon-pencil"></span> Child</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

编辑：很奇怪，我一定是在发布之前不小心擦掉了代码

Answer 1

在您的样式表中使用以下内容。 （调用 bootstrap.css 后）

#request_header .collapse.in,
#request_header2 .collapse.in {
    display: table-row-group;
}

Answer 2

Bootstrap 正在将您的表格元素设置为 display: block（而不是 display: table 等）。您可能希望使用回调来扭转这种情况。

$('#myCollapsible').on('shown.bs.collapse', function () {
    $('#request_header2 tr').css('display', 'table-row');
    $('#request_header2 th, #request_header2 td').css('display', 'table-cell');
})

http://getbootstrap.com/javascript/#collapse

Answer 3

我认为如果您去掉可折叠表格中的<caption /> 元素并在表格上方写上您的<h2 /> 标题（如this），效果会更好。

编辑：修复断开的链接。

EDIT2：通过使表格响应来修复示例。