Div table, need 1 row to extend to full width in between other rows

Question

I am struggling with a table (made of divs). I need the row in the middle to extend to the full width of the table and with text in the center of the row (not the cell).

I do NOT want the whole thing to overflow-x. And independently of the length of the text in this extended row, the width of the two main columns should not change.

So, basically, I would like an independent div, that needs to be inside the table.
How can I achieve that?

.divTable {
  display: table;
  margin: auto;
  width: 100%
}

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

.divTableRow {
  display: table-row;
}

.divTableCell {
  display: table-cell;
  border: 1px solid blue;
}

.divTableCellExtended {
  white-space: nowrap;
}

<div class="divTable">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">
        some random text here
      </div>
      <div class="divTableCell">
        some random text here
      </div>
    </div>
    <div class="divTableRow">
      <div class="divTableCellExtended">
        some random text here long enough to extend out of single cell
      </div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">
        some random text here
      </div>
      <div class="divTableCell">
        some random text here
      </div>
    </div>
  </div>
</div>

View on JSFiddle

Answer 1

This is a known problem:

You want to take advantage of display:table/<table> element's property of auto-adjusting width of cells across the same column, depending on content, but you want to display them responsively on narrow devices.

If you use <div> elements and try to implement display:table on them, everything works fine until you need colspan, because colspan does not have a CSS equivalent to implement with display:table-cell; on non-table elements.

So you need to do it the other way around: keep <table> elements, use colspan on the <td>s where you want it to apply and enforce display:block on narrow devices.

Proof of concept:

.table {
  width: 100%;
  border-collapse: collapse;
}
.table td {
  border: 1px solid blue;
  padding: .5rem 1rem;
}
@media (max-width:660px) {
  /* change the breakpoint to whatever you need. 660px is just an example */
  .table,
  .table tbody,
  .table thead,
  .table tfoot,
  .table tr,
  .table td,
  .table th {
    display: block;
  }  
  .table td {
    margin: 0 -1px -1px 0;
  }
  .table tr {
    margin-bottom: 1rem;
  }
}
/* rest is just styling. ignore */
body  {background-color: #eee;}
.table {
  box-shadow: 0 3px 5px -1px rgba(0,0,0,.1), 0 5px 8px 0 rgba(0,0,0,.07), 0 1px 14px 0 rgba(0,0,0,.06)
}
.table td {
  border-color: #ddd;
  background-color: white;
}
@media(max-width: 660px) {
  .table {
    box-shadow: none;
  }
  .table tr {
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.1), 0 5px 8px 0 rgba(0,0,0,.07), 0 1px 14px 0 rgba(0,0,0,.06)
  }
}

<table class="table" >
  <tr>
    <td>1.1 some random text here</td>
    <td>1.2 some random text here</td>
    <td>1.3 some random text here</td>
  </tr>
  <tr>
    <td colspan="3">2. some random text here, expanding across 3 columns and wrapping up, like it should... some random text here, expanding across 3 columns and wrapping up, like it should... some random text here, expanding across 3 columns and wrapping up, like it should... some random text here, expanding across 3 columns and wrapping up, like it should... some random text here, expanding across 3 columns and wrapping up, like it should...</td>
  </tr>
  <tr>
    <td>3.1. some random text here, in 1 column and wrapping up, like it should...</td>
    <td colspan="2">3.2. some random text here, in 2 columns and wrapping up, like it should... some random text here, expanding across 2 columns and wrapping up, like it should... some random text here, expanding across 2 columns and wrapping up, like it should...</td>
  </tr>
  <tr>
    <td colspan="2">4.1. some random text here, in 2 columns and wrapping up, like it should... some random text here, expanding across 2 columns and wrapping up, like it should... some random text here, expanding across 2 columns and wrapping up, like it should...</td>
    <td>4.2. (or 4.3. - what is it?) some random text here, in 1 column and wrapping up, like it should...</td>
  </tr>
</table>

Answer 2

I saw that you were open to not using table layout if possible to keep full width of table. So i've come with this 'solution'. I'm not sure that it solves your case but I hope it helps to point you in the right direction.

Edit: Fixing (partially, still loses alignment on small widths) the width problem so that extra content wont push up the columns on the sides. (add flex-basis: 0 to .cell styling).

Edit2 Perhaps you could take a look on other (and more complete) content about flex-box and responsive tables if you happen to use this kind of solution.

CSS-Tricks article about responsive tables with flex-box

.table {
  display: flex;
  flex-flow: column;
  width: 100%;
}

.row {
  display: flex;
  border: 1px solid blue;
  border-top: none;
}

.row:first-child {
  border-top: 1px solid blue;
}

.cell {
  border-right: 1px solid blue;
  flex-grow: 1;
  flex-basis: 0;
}

.cell:last-child {
  border: none;
}

<div class="table">
  <div class="row">
    <div class="cell">1,1</div>
    <div class="cell">Large content should not be able to push up columns on the side...</div>
    <div class="cell">1,3</div>
  </div>
  <div class="row">
    <div class="cell">2,1</div>
  </div>
  <div class="row">
    <div class="cell">3,1</div>
    <div class="cell">3,2</div>
    <div class="cell">3,3</div>
  </div>
</div>