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

新手上路,请多包涵

我有以下代码:

 .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 许可协议

阅读 501
2 个回答

由于 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 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题