html - 行与行之间具有 colspan 的表格单元格

Question

我想用 CSS 创建一个表格，它使用 table-cell 但允许多个 cospans，例如:

我已经发现表格的最后一行是可能的，请参阅 answer还有这个jFiddle .

但是我没有设法对中间的行执行此操作。这个问题有解决方案吗？

#table {
  display: table;
}

.group {
  display: table-row-group;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  border: 1px solid grey;
  padding: 5px
}

.caption {
  border: 1px solid grey;
  caption-side: bottom;
  display: table-caption;
  text-align: center;
}

<div id="table">
  <div class="group">
    <div class="row">
      <div class="cell">525234234234</div>
      <div class="cell ">41414124124</div>
      <div class="cell ">13123123</div>
    </div>
  </div>
  <div class="group">
    <div class="row">
      <div class="cell">525234234234</div>
      <div class="cell ">41414124124</div>
      <div class="cell ">13123123</div>
    </div>
  </div>
  <div class="group">
    <div class="row">
      <div class="cell">525234234234</div>
      <div class="cell ">41414124124</div>
      <div class="cell ">13123123</div>
    </div>
  </div>
  <div class="caption">
    Hi
  </div>
</div>

Answer 1

您可以尝试一些解决方法来创建具有 colspan/rowspan 的错觉，因为它们没有通过 display:table: 实现的:

#table {
  display: table;
}

.group {
  display: table-row-group;
}

.row,
.caption {
  display: table-row;
}

.cell {
  display: table-cell;
  border: 1px solid grey;
  padding: 5px
}

.caption>.cell {
  border-right: none;
  border-left: none;
}

.caption>.cell:last-child {
  border-right: 1px solid grey;
}

.caption>.cell:first-child {
  border-left: 1px solid grey;
}

<div id="table">
  <div class="group">
    <div class="row">
      <div class="cell">525234234234</div>
      <div class="cell ">41414124124</div>
      <div class="cell ">13123123</div>
    </div>
    <div class="caption">
      <div class="cell">Hi</div>
      <div class="cell "></div>
      <div class="cell "></div>
    </div>
  </div>
  <div class="group">
    <div class="row">
      <div class="cell">525234234234</div>
      <div class="cell ">41414124124</div>
      <div class="cell ">13123123</div>
    </div>
  </div>
  <div class="group">
    <div class="row">
      <div class="cell">525234234234</div>
      <div class="cell ">41414124124</div>
      <div class="cell ">13123123</div>
    </div>
  </div>

</div>

如果您想要在整行中显示内容，您可以尝试这个技巧，它更像是一个hack，而不是一个通用的解决方案。

#table {
  display: table;
}

.group {
  display: table-row-group;
}

.row,
.caption {
  display: table-row;
}

.cell {
  display: table-cell;
  border: 1px solid grey;
  padding: 5px
}

.caption>.cell {
  border-right: none;
  border-left: none;
}

.caption>.cell:last-child {
  border-right: 1px solid grey;
}

.caption>.cell:first-child {
  border-left: 1px solid grey;
}
.caption .cell:before {
   content:"A";
   font-size:0;
}
.caption .cell span {
  position:absolute;
}

<div id="table">
  <div class="group">
    <div class="row">
      <div class="cell">525234234234</div>
      <div class="cell ">41414124124</div>
      <div class="cell ">13123123</div>
    </div>
    <div class="caption">
      <div class="cell"><span>some very long content to all row</span></div>
      <div class="cell "></div>
      <div class="cell "></div>
    </div>
  </div>
  <div class="group">
    <div class="row">
      <div class="cell">525234234234</div>
      <div class="cell ">41414124124</div>
      <div class="cell ">13123123</div>
    </div>
  </div>
  <div class="group">
    <div class="row">
      <div class="cell">525234234234</div>
      <div class="cell ">41414124124</div>
      <div class="cell ">13123123</div>
    </div>
  </div>

</div>