Question

我需要使用bootstrap将一个html表包装在div collapsing元素中但是我在最后一列上得到一个奇怪的行为，并不总是显示在Chrome（44.0.2403.107 m）上，具体取决于窗口宽度。它在Firefox上运行良好。

您可以尝试以下小提琴 - ＆gt; https://jsfiddle.net/mattbt/5k7ym9qp/

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
         <h4 class="panel-title">
    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      Collapsible Group Item #1
    </a>
  </h4>

    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <table class="table table-bordered table-hover" style="background-color: white;">
            <thead>
                <tr class="info">
                    <th>header</th>
                    <th style="width:30px;">header</th>
                    <th>header</th>
                    <th style="width:75px;">header header</th>
                    <th>header header</th>
                    <th>header header</th>
                    <th>last col</th>
                </tr>
            </thead>
            <tbody id="tbody-1">
                <tr id="rowscen-1">
                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut imperdiet nibh. Ut finibus lectus sed metus elementum aliquam. Etiam rhoncus varius malesuada. Integer id lorem ultrices, eleifend ex ut, dignissim lorem. Nunc commodo tincidunt euismod. Cras at dui libero. Sed viverra neque in risus maximus facilisis. Phasellus nulla nisi, pretium vitae vulputate at, ornare in arcu. Praesent mi nulla, tincidunt sed lacinia eget, molestie ut elit. Aliquam nec tristique est.</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut imperdiet nibh. Ut finibus lectus sed metus elementum aliquam. Etiam rhoncus varius malesuada.</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut imperdiet nibh. Ut finibus lectus sed metus elementum aliquam. Etiam rhoncus varius malesuada.</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut imperdiet nibh. Ut finibus lectus sed metus elementum aliquam. Etiam rhoncus varius malesuada.</td>
                    <td class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut imperdiet nibh. Ut finibus lectus sed metus elementum aliquam. Etiam rhoncus varius malesuada.</td>
                    <td>Lorem ipsum dolor sit amet</td>
                    <td>Last Column text</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

尝试调整浏览器窗口并调整其大小以查看最后一列是否消失。

我想这只是微不足道但是我被困住了。谢谢你的帮助。

Answer 1

因为你正在使用Bootstrap。你已经完成了所有它预定义的类，比如你的问题下面的评论中指出的崩溃就像'messerbill'。我想在关注互联网上的例子时，你需要注意你复制了多少代码，因为你可能会发现它的一部分与你正在寻找的东西无关。例如上面代码中的panel-collapse类。

看看这个小提琴，看一下如何使用引导类和没有内联样式来布局表。我知道这不是你想要的答案的100％。但我认为至少应该指出你正确的方向！

http://jsfiddle.net/w6u20yc9/

使用chrome时，最后一列并不总是显示在bootstrap折叠元素内的html表中

1 个答案: