Table-cell with colspan inbetween rows

Question

I want to create a table with CSS which uses table-cell but allows multiple cospans, for example like that:

I have already found out that this is possible for the last row of a table, see this answer and this jFiddle.

However I did not manage to do it for rows inbetween. Is there a solution for that problem?

#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

You may try some workaround to create the illusion of having colspan/rowspan since there is no implementation for them with 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>

And if you want to have content on the full row, you may try this trick which is more a hack than a generic solution.

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