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

Question

我有以下代码：

.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

---

你不能只使用一个表格吗？这将会更加简单。如果这是表格数据的话，那么它也更具语义性。 - punkrockbuddyholly

@thirtydot 可能可以，但这只会很麻烦且不必要。像960这样的网格系统基本上可以实现整个页面布局的此类效果。 - punkrockbuddyholly

@MrMisterMan：我不确定你在说什么。960.gs没有使用display: table-cell。 - thirtydot

@thirtydot 抱歉，我忘记了原帖提出的具体问题。你是对的，无法通过CSS添加colspan。我想指出的是，你可以让div像行和列一样运作，包括跨越多列的单元格。 - punkrockbuddyholly

使用模拟表格作为您的第一级组织，这将使您能够创建一个粘性页脚。对于您的colspan仿真，您可以在唯一的单元格中创建一个嵌套表格，其中将有一行和您需要的许多单元格，或者使用简单的浮动div。 - Bernard Dusablon

请查看此处有关 div 表格 colspan 的信息：https://dev59.com/Ym445IYBdhLWcg3wq8Lp。 - naXa stands with Ukraine

Answer 1

据我所知，缺少colspan/rowspan仅是"display:table"的限制之一。请参考此文：http://www.onenaught.com/posts/201/use-css-displaytable-for-layout。

- Russell Zahniser

Answer 2

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

现场演示（演示）这里。

编辑： 我对代码进行了微调，使其更适合打印机使用，因为默认情况下它们会省略背景颜色。我还创建了行跨度演示，受到这里的晚回答的启发。

- F-3000

---

我在寻找类似的解决方案。但是，顶部行上有5个单元格。在底部行上，我需要1个与顶部行大小相同的单元格。然后一个具有colspan=2的单元格和另一个具有colspan=2的单元格，使底部行总共有5个单元格。这里是基于您的解决方案的jsfiddle问题。有什么想法吗？https://jsfiddle.net/7wdza4ye/1/ - Varun Verma

@VarunVerma，你必须在第7个单元格和第8个单元格之间添加空单元格。只需添加<div class="cell"></div>即可（至少在Firefox中）。使用此设计，您需要用空单元格填充。例如，如果您将单元格7设置为colspan = 3，而单元格8是普通的，则需要在单元格7和8之间添加两个空单元格。除非您设计其他内容（边距？单个自定义div？）。此外，100px的宽度和5个单元格使事情变得棘手，因为单词会拉伸css单元格，溢出设置似乎没有任何区别。您还需要重新计算div.colspan>div>div的width。 - F-3000

它起作用了。谢谢。实际上，我在单元格8后添加了一个空单元格，因为底部边框没有显示出来。这是最新的：https://jsfiddle.net/7wdza4ye/3/。不确定如何在单元格7和8之间获得边框。有什么建议吗？感谢您的帮助。 - Varun Verma

@VarunVerma，使用Chrome浏览器时，在第8个单元格后面没有空单元格，外边框就不完整了，所以确实需要。在第7个和第8个单元格之间添加边框的简单方法可能是这样的：div.colspan{border-left:1px solid red}。它需要放置在设置div.colspan无边框的规则下面的某个位置，否则它会被覆盖。 - F-3000

谢谢@F-3000。那很有帮助。对于其他人，这是基于F-3000解决方案的最新链接：https://jsfiddle.net/7wdza4ye/4/。 - Varun Verma

Answer 3

对我在Chrome 30中有效的一种更简单的解决方案：

可以通过使用display: table而不是display: table-row来模拟Colspan：

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

唯一的陷阱在于，叠加行的单元格不会垂直对齐，因为它们来自不同的表格。

- Philippe97

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>

- stacigh

---

太棒了，你真厉害！ - Raj Kamal

使用display: table-caption将跨越所有列并将行放置在表格顶部，就像HTML表格中的标题元素一样，因此这并不真正起作用。只有在您想要跨越第一行或最后一行的所有列时才有效。 - Michiel

Answer 5

只需使用table标签。

当用于布局目的时，表格通常不受欢迎。

这似乎是表格数据（行/列数据）。因此，我建议使用table标签。

有关更多信息，请参见我的答案此问题：

使用div创建与表格相同的元素

- Curtis

---

问题是，这不适用于表格数据，所以我不想使用表格 :) - Madara's Ghost

我不明白为什么将所有内容用CSS精确地表现成表格的方式比直接使用表格更好。诚然，使用tr/td标签会导致HTML代码看起来不太美观，但这是唯一的原因吗？很多人都说表格并不适合用于格式化，但实际上，包括网络应用在内，HTML本身并不是被设计用于我们今天认为是可以接受的许多功能。 - Slight

将近一年后，但是——稍微有点，我与你分享对那些没有理由避免使用表格而声称“表格已过时”的人的不满。然而，在某些响应式设计中，有时将表格转化为非表格形式以便在较小的屏幕宽度下重新排列很有用。但我发现div元素没有colspan属性，让我感到有点失望。 - spinn

我使用table/tr/td格式化了我的搜索栏和菜单图标。当我开始使用屏幕阅读器进行测试时，我发现了为什么不应该这样做。Android的TalkBack会将表格、行数、列数等内容读出来，好像它是一个数据表。但是，后来我发现如果我使用role="presentation"，就可以保留table/tr/td。注意到Gmail在搜索栏的格式化中也是这样做的。 - user984003

Answer 6

这是一种我在自己的情况中使用的CSS跨列的方法。 这里有代码示例。

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

- Tim

---

为了达到我想要的效果，我不得不在 .colspan 中加入 white-space: nowrap;，但它非常有效。 - kshetline

Answer 7

有一个解决方案可以使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>

解释：

我们在colspan上使用position absolute，使其成为表格的全宽。表格本身需要position relative。我们利用dummycell来维护行的高度，因为position absolute不遵循文档流。

当然，现在你也可以使用flexbox和grid来解决这个问题。

最初的回答：

为了让colspan占据整个表格的宽度，我们使用了position absolute。同时，表格本身需要设置position relative。为了保持行的高度，我们使用了dummycell。需要注意的是，position absolute不会遵循文档流。当然，现在你也可以使用flexbox和grid来解决这个问题。

- J.T. Houtenbos

Answer 8

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

HTML

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

{{链接1：代码}}

- bderevyaga

Answer 9

只需使用纯CSS并将文本居中在“伪”colspan上即可完成。

技巧是将行设置为position:relative，然后在要进行colspan的row中放置“空div”（它们必须具有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>

- Joe82

Answer 10

您可以将colspan内容的位置设置为"relative"，将行设置为"absolute"，如下所示：

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

- Justo