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

Question

我有以下代码:

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

非常直截了当.如何为元素添加colspan(或等效的colspan)display: table-cell？

Answer 1

据我所知,缺乏colspan/rowspan只是其中一个限制display:table.看这篇文章:

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

Answer 2

由于OP没有明确规定解决方案必须是纯CSS,我会顽固地投入我今天想到的解决方法,特别是因为它比在表格中有一个表格更优雅.

示例等于<table>,每行有两个单元格和两行,其中第二行中的单元格是td colspan="2".

我用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,灵感来自这里的最新答案.

Answer 3

一个更简单的解决方案,适用于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;
}

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

Answer 4

如果你正在寻找一种直接的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>

Answer 5

只需使用一个table.

表格只是在用于布局目的时不赞成.

这看起来像表格数据(数据的行/列).因此我建议使用table.

有关详细信息,请参阅此问题的答案:

使用div作为表创建相同的东西

Answer 6

这是我根据自己的情况使用的一种在 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>