表格单元格与行之间的 colspan

Question

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

我已经发现表格的最后一行可以这样做，请参阅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>