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

小开

只需使用 table。

表只有在用于布局目的时才会被禁止使用。

这看起来像是表格数据(数据的行/列)。

有关详细信息，请参阅我对这个问题的回答:

用 div 创建与表相同的东西

小开

最佳答案

据我所知，缺少 colspan/rowspan 只是 display:table的局限之一:

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

小开

使用嵌套表嵌套列跨度..。

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


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

或者使用两个表，其中列跨度覆盖整行..。

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


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

小开

由于 OP 没有 明确地规则，解决方案必须是纯 CSS，我会固执地抛出我今天想出的解决方案，特别是因为它比表中有一个表要优雅得多。

示例等于 < table > ，每行有两个单元格，其中第二行的单元格是带有 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，灵感来自这里的后期答案。

小开

在 Chrome30中，有一个更简单的解决方案:

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

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

小开

如果您正在寻找一种直接的 CSS 方式来模拟 Colspan，您可以使用 display: table-caption。

.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid #000;
}
.colspan2 {
/* What to do here? */
display: table-caption;
}

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

小开

通过使用适当的 div 类和 CSS 属性，可以模拟 colspan 和 rowspan 的预期效果。

这是 CSS

.table {
display:table;
}


.row {
display:table-row;
}


.cell {
display:table-cell;
padding: 5px;
vertical-align: middle;
}

下面是 HTML 示例

<div class="table">
<div class="row">
<div class="cell">
<div class="table">
<div class="row">
<div class="cell">X</div>
<div class="cell">Y</div>
<div class="cell">Z</div>
</div>
<div class="row">
<div class="cell">2</div>
<div class="cell">4</div>
<div class="cell">6</div>
</div>
</div>
</div>
<div class="cell">
<div class="table">
<div class="row">
<div class="cell">
<div class="table">
<div class="row">
<div class="cell">A</div>
</div>
<div class="row">
<div class="cell">B</div>
</div>
</div>
</div>
<div class="cell">
ROW SPAN
</div>
</div>
</div>
</div>
</div>
</div>

从我在问题和大多数回答中看到的情况来看，人们似乎忘记了在任何一个作为“表单元”的 div 中，你可以插入另一个作为嵌入表的 div，然后重新开始这个过程。

这并不迷人，但是对于那些寻找这种格式的人来说确实有用，他们想要避免使用表格。如果是为了数据布局，那么表在 HTML5中仍然可以工作。

希望这能帮到别人。

小开

您可以将 colspan 内容的位置设置为“相对”，将行设置为“绝对”，如下所示:

.table {
display: table;
}
.row {
display: table-row;
position: relative;
}
.cell {
display: table-cell;
}
.colspan2 {
position: absolute;
width: 100%;
}

小开

即使这是一个老问题，我也愿意分享我对这个问题的解决方案。

<div class="table">
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
<div class="row">
<div class="cell colspan">
<div class="spanned-content">Cell</div>
</div>
</div>
</div>


<style>
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
.colspan:after {
/* What to do here? */
content: "c";
display: inline;
visibility: hidden;
}
.spanned-content {
position: absolute;
}
</style>

这是小提琴。它不是一个真正的跨度，而且解决方案有点古怪，但它在某些情况下是有用的。在 Chrome 46，Firefox 31和 IE 11上测试。

在我的例子中，我必须以表格的方式呈现一些非表格数据，保持列的宽度并给数据的子部分命名。

小开

CSS

.tablewrapper {
position: relative;
}
.table {
display: table;
position: relative
}
.row {
display: table-row;
}
.cell {
border: 1px solid red;
display: table-cell;
}
.cell.empty
{
border: none;
width: 100px;
}
.cell.rowspanned {
position: absolute;
top: 0;
bottom: 0;
width: 100px;
}
.cell.colspan {
position: absolute;
left: 0;
right: 0;
}

超文本标示语言

<div class="tablewrapper">
<div class="table">
<div class="row">
<div class="cell rowspanned">
Center
</div>
<div class="cell">
Top right
</div>
</div>
<div class="row">
<div class="cell empty"></div>
<div class="cell colspan">
Bottom right
</div>
</div>
</div>
</div>

密码

小开

你现在做不到这一点。

AFAIK 这将涵盖 CSS 表格，一个规范，目前似乎是在“工作在进行中”的状态。

小开

您可以尝试这个解决方案，在这里您可以找到如何使用 div 应用 colspan Https://codepen.io/pkachhia/pen/jywmxy

HTML:

<div class="div_format">
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell cell_lable">Project Name</div>
<div class="divTableCell cell_value">: Testing Project</div>
<div class="divTableCell cell_lable">Project Type</div>
<div class="divTableCell cell_value">: Web application</div>
</div>
<div class="divTableRow">
<div class="divTableCell cell_lable">Version</div>
<div class="divTableCell cell_value">: 1.0.0</div>
<div class="divTableCell cell_lable">Start Time</div>
<div class="divTableCell cell_value">: 2016-07-10 11:00:21</div>
</div>
<div class="divTableRow">
<div class="divTableCell cell_lable">Document Version</div>
<div class="divTableCell cell_value">: 2.0.0</div>
<div class="divTableCell cell_lable">End Time</div>
<div class="divTableCell cell_value">: 2017-07-10 11:00:23</div>
</div>
<div class="divTableRow">
<div class="divTableCell cell_lable">Document Revision</div>
<div class="divTableCell cell_value">: 3</div>
<div class="divTableCell cell_lable">Overall Result</div>
<div class="divTableCell cell_value txt_bold txt_success">: Passed</div>
</div>
</div>
<div class="divCaptionRow">
<div class="divCaptionlabel">Description</div>
<div class="divCaptionValue">: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</div>
</div>
</div>
</div>

CSS:

body {
font-family: arial
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.div_format {
width: 100%;
display: inline-block;
position: relative
}
.divTable {
display: table;
width: 100%;
}
.divTableRow {
display: table-row
}
.divTableHeading {
background-color: #EEE;
display: table-header-group
}
.divTableCell,
.divTableHead {
display: table-cell;
padding: 10px
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold
}
.divTableBody {
display: table-row-group
}
.divCaptionRow{
display: table-caption;
caption-side: bottom;
width: 100%;
}
.divCaptionlabel{
caption-side: bottom;
display: inline-block;
background: #ccc;
padding: 10px;
width: 15.6%;
margin-left: 10px;
color: #727272;
}
.divCaptionValue{
float: right;
width: 83%;
padding: 10px 1px;
border-bottom: 1px solid #dddddd;
border-right: 10px solid #fff;
color: #5f5f5f;
text-align: left;
}


.cell_lable {
background: #d0d0d0;
border-bottom: 1px solid #ffffff;
border-left: 10px solid #ffffff;
border-right: 10px solid #fff;
width: 15%;
color: #727272;
}
.cell_value {
border-bottom: 1px solid #dddddd;
width: 30%;
border-right: 10px solid #fff;
color: #5f5f5f;
}

小开

这里有一种在 CSS 中跨栏的方法，我用它来处理我自己的情况。

Https://jsfiddle.net/mb8npttu/

.table {
display: table;
}


.row {
display: table-row;
}


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


.colspan {
max-width: 1px;
overflow: visible;
}

<div class='table'>
<div class='row'>
<div class='cell colspan'>
spanning
</div>
<div class='cell'></div>
<div class='cell'></div>
</div>


<div class='row'>
<div class='cell'>1</div>
<div class='cell'>2</div>
<div class='cell'>3</div>
</div>
</div>

小开

有一个解决方案可以使 Colspan 的宽度与整个表的宽度相同。不能使用此技术跨越表的一部分。

密码:

* {
box-sizing: border-box;
}


.table {
display: table;
position: relative;
}


.row {
display: table-row;
}


.cell {
display: table-cell;
border: 1px solid red;
padding: 5px;
text-align: center;
}


.colspan {
position: absolute;
left: 0;
width: 100%;
}


.dummycell {
border-color: transparent;
}

<div class="table">
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
<div class="row">
<div class="cell dummycell">&nbsp;</div>
<div class="cell colspan">Cell</div>
</div>
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
</div>

说明:

我们使用位置的绝对跨度，使它的全宽表。表本身需要位置相对。我们使用一个 Dummycell 来维护行的高度，绝对位置不遵循文档的流程。

当然，现在你也可以使用弹性工具箱和网格来解决这个问题。

小开

它可以做到只是用纯 CSS 和中心的文本跨越“假”Colspan。

诀窍是将行设置为 position:relative，然后将“空 div”放置在 row中，这样就可以创建 colspan(它们必须有 height才能工作) ，将内容所在的 cell设置为 display:grid，最后将 position:absolute应用于单元格内的元素(并将其居中，因为您可以将任何其他绝对元素居中)。

 .table {
display: table;
}
.row {
display: table-row;
position: relative;
}
.cell {
display: table-cell;
background-color: blue;
color: white;
height: 26px;
padding: 0 8px;
}
.colspan2 {
display: grid;
}
.colspan2 p {
position:absolute;
left: 50%;
transform:translateX(-50%);
margin: 0;
}

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