How can I let a table cell take in the full width of the table with css?

For some reason the cells in my second row in my table are changing the width of the cells in the row above. I have no idea why this is the cause. I don't want the width of the first cell in the first row to be changed. I have reproduced the problem in jsfiddle to make it clear what I mean.

FiddleJS link:

https://jsfiddle.net/bpyrgsvc/1/

HTML:

<div class="table">
  <div class="row">
    <div class="cell">test</div>
    <div class="cell">test</div>
    <div class="cell">test</div>
    <div class="cell">test</div>
    <div class="cell">test</div>
  </div>
  <div class="row">
    <div class="cell">this changes the width of the cell above</div>
  </div>
</div>

CSS:

.table {
  display:table;
}

.row {
  display: table-row;
}

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

With CSS you can build a table using a table element and then style how you want using display: block and inline-block. Though if your need really is as simple as it appears to be then a simple colspan will do the jobs.

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="4"></td>
  </tr>
</table>