Question

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

在小提琴上，您会注意到当您折叠部分（在它们消失之前）时，表格布局会短暂地自行更正。这到底是怎么回事？您可以看到我所包含的唯一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：通过使表格响应来修复示例。

Bootstrap折叠干扰响应表布局

3 个答案: