Colspan/Rowspan 的显示设置为 table-cell 的元素

问题描述

我有以下代码：

<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan2">Cell</div>
    </div>
</div>

<style>
    .table {
        display: table;
    }
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
    }
    .colspan2 {
        /* What to do here? */
    }
</style>

很简单如何使用 display: table-cell 为元素添加 colspan(或相当于 colspan)？

最佳解决方案

据我所知，缺少 colspan /rowspan 只是 display:table 的局限性之一。看到这个帖子

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

次佳解决方案

由于 OP 没有明确规定该解决方案必须是纯 CSS，所以我会固执地扔在我今天想到的解决方法中，特别是因为它比表格中的表更加优雅。

示例等于< table> 每行和两行有两个单元格，第二行中的单元格与 colspan = “2” 是一个 td 。

我已经用 Iceweasel 20，Firefox 23 和 IE 10 进行了测试。

CSS：

div.table
{
    display:table;
    width:100px;
    background-color:lightblue;
    border-collapse:collapse;
    border:1px solid red;
}

div.row
{
    display:table-row;
}

div.cell
{
    display:table-cell;
    border:1px solid red;
}

div.colspan,div.colspan+div.cell
{
    border:0;
}

div.colspan>div
{
    width:1px;
}

div.colspan>div>div
{
    position:relative;
    width:99px;
    overflow:hidden;
}

HTML：

<div class="table">
    <div class="row">
        <div class="cell">cell 1</div>
        <div class="cell">cell 2</div>
    </div>
    <div class="row">
        <div class="cell colspan">
            <div><div>
                cell 3
            </div></div>
        </div>
        <div class="cell"></div>
    </div>
</div>

实时动作 (演示)here 。

编辑：我将代码更改为 printer-friendly，默认情况下离开 background-colors 。我也创造了 rowspan-demo，灵感来自迟到的答案。

第三种解决方案

一种在 Chrome 30 中适用于我的更简单的解决方案：

Colspan 可以使用 display: table 而不是 display: table-row 进行仿真：

.table {
    display: block;
}
.row {
    display: table;
    width: 100%;
}
.cell {
    display: table-cell;
}
.row.colspan2 {/* You'll have to add the 'colspan2' class to the row, and remove the unused <div class=cell> inside it */
    display: block;
}

唯一的缺陷是，堆叠行的单元格不会垂直对齐，因为它们来自不同的表。

第四种方案

只需使用 table 。

当用于布局时，桌子只会皱起眉头。

这似乎是表格数据 (行/列的数据) 。因此，我建议使用 table 。

有关更多信息，请参阅 this question 的答案：

creating the same thing with divs as tables

参考文献

Colspan/Rowspan for elements whose display is set to table-cell

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

Colspan/Rowspan 的显示设置为 table-cell 的元素