我有以下代码： .table { display: table; } .row { display: table-row; } .cell { display: table-cell; } .colspan2 { /* What to do here? */ } <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> 非常简单。如何为带有 display: table-cell 的元素添加 colspan（或等效的 colspan）？原文由 Madara‘s Ghost 发布，翻译遵循 CC BY-SA 4.0 许可协议

据我所知，缺少 colspan/rowspan 只是 display:table 的限制之一。看这篇文章： http://www.onenaught.com/posts/201/use-css-displaytable-for-layout 原文由 Russell Zahniser 发布，翻译遵循 CC BY-SA 3.0 许可协议

显示设置为表格单元格的元素的 Colspan/Rowspan

由于 OP 没有明确规定解决方案必须是纯 CSS，因此我会固执地提出我今天想出的解决方法，尤其是因为它比在表中有表要优雅得多。

示例等于

每行两个单元格和两行，其中第二行中的单元格是带有 colspan="2" 的 td。

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

 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;
}

 <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>

现场表演（演示）在这里。

编辑：我将代码微调为更适合打印，因为默认情况下它们会保留背景色。我还创建了 rowspan-demo ，灵感来自这里的迟到答案。

原文由 F-3000 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

Stack Overflow 翻译

子站问答

访问

本篇内容翻译自 Stack Overflow，如果你觉得翻译结果值得改进，欢迎直接编辑修改，感谢你为社区贡献。

相似问题

找不到问题？创建新问题

显示设置为表格单元格的元素的 Colspan/Rowspan

你尚未登录，登录后可以

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

问一个鼠标滚动事件，这种是怎么实现的？

css如何设置纵向滚动条的高度？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

Stack Overflow 翻译