css div 禁用表格行 colspan答案

【问题标题】：css div disable table row colspancss div 禁用表格行 colspan
【发布时间】：2015-04-11 11:57:48
【问题描述】：

有没有办法让可折叠的行与列数同时展开？或者至少具有 div 表的全宽？我偶然发现了this，但它似乎没有帮助。

您可以在此jsfiddle 中查看完整代码。

<div class="div-table">
<div class="div-heading">
    <div>Head 1</div>
    <div>Head 2</div>
    <div>Head 3</div>
    <div>Head 4</div>
    <div>Head 5</div>
    <div>Head 6</div>
</div>
<div class="div-row">
    <div class="cell">col 1</div>
    <div class="cell">col 2</div>
    <div class="cell">col 3</div>
    <div class="cell">col 4</div>
    <div class="cell"><a href="#row1" data-toggle="collapse" aria-expanded="false" aria-controls="row1">col 5</a>

    </div>
    <div class="cell">col 6</div>
</div>
<div class="div-row div-row-collapsible">
    <div class="collapse text-center" id="row1">must be full width</div>
</div>

【问题讨论】：

使用<table>有什么问题？

标签： html css

【解决方案1】：

将整个内容包装在另一个 div 中。

<div>
</div>

请看这里： http://jsfiddle.net/5x8wu0sc/

我只更新了html。

【讨论】：

【解决方案2】：

包含文本“必须为全宽”的 div 可用的整个宽度结束于表格的第二列单元格应开始的位置。这似乎是主 div 中使用的 display='table' 的结果。您不能使用 colspan 放大第一列，如下所述：Colspan/Rowspan for elements whose display is set to table-cell

我认为你必须考虑使用引导网格系统。它应该为您提供一种简单的方法来完成餐桌上的工作。

【讨论】：