display：table中的非table-cell表现不同

Question

在这个JsBin示例中，没有单元格但具有通用div的特定行不考虑表格的100％宽度，即使表格宽度明确指定为100％。

有没有办法解决这个问题？

<div class="table">
<div class="row clearfix">
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
</div>
<div class="row">
  <div class="cell">cell1</div>      
  <div class="cell">cell2</div>      
  <div class="cell">cell3</div>      
</div>
<div class="row">
  <div class="cell">cell1</div>      
  <div class="cell">cell2</div>      
  <div class="cell">cell3</div>      
</div>
</div>

.table {
  display: table;
  width: 100%;  
  border: 1px solid blue;
}

.row {
  display: table-row;
  width: 100%;
}

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

.section {
  width: 30%;
  float: left;
  height: 30px;
  border: 1px solid red
}

.clearfix:after {
  content: " ";
  display: table;
  clear: both;
}