在行之间具有colspan的表格单元格

Question

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

我已经发现这可以用于表格的最后一行，请参阅此answer和此jFiddle。

但是我没有设法为中间的行做这件事。这个问题有解决方案吗？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>