如何在基于 div 的表格中保持一致的单元格高度

Question

我有一个 div 和 css 响应表，但单元格高度不一致，即如果一行中的一个单元格的高度为两行，则该行会被损坏（如图所示）。

这是我的代码：

.table {
  display: table;
  text-align: center;
  width: 60%;
  margin: 10% auto 0;
  border-collapse: separate;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

.table_row {
  display: table-row;
}

.theader {
  display: table-row;
}

.table_header {
  display: table-cell;
  border-bottom: #ccc 1px solid;
  border-top: #ccc 1px solid;
  background: #bdbdbd;
  color: #e5e5e5;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: 700;
}

.table_header:first-child {
  border-left: #ccc 1px solid;
  border-top-left-radius: 5px;
}

.table_header:last-child {
  border-right: #ccc 1px solid;
  border-top-right-radius: 5px;
}

.table_small {
  display: table-cell;
}

.table_row>.table_small>.table_cell:nth-child(odd) {
  display: none;
  background: #bdbdbd;
  color: #e5e5e5;
  padding-top: 10px;
  padding-bottom: 10px;
}

.table_row>.table_small>.table_cell {
  padding-top: 3px;
  padding-bottom: 3px;
  color: #5b5b5b;
  border-bottom: #ccc 1px solid;
}

.table_row>.table_small:first-child>.table_cell {
  border-left: #ccc 1px solid;
}

.table_row>.table_small:last-child>.table_cell {
  border-right: #ccc 1px solid;
}

.table_row:last-child>.table_small:last-child>.table_cell:last-child {
  border-bottom-right-radius: 5px;
}

.table_row:last-child>.table_small:first-child>.table_cell:last-child {
  border-bottom-left-radius: 5px;
}

.table_row:nth-child(2n+3) {
  background: #e9e9e9;
}

@media screen and (max-width: 900px) {
  .table {
    width: 90%
  }
}

@media screen and (max-width: 650px) {
  .table {
    display: block;
  }
  .table_row:nth-child(2n+3) {
    background: none;
  }
  .theader {
    display: none;
  }
  .table_row>.table_small>.table_cell:nth-child(odd) {
    display: table-cell;
    width: 50%;
  }
  .table_cell {
    display: table-cell;
    width: 50%;
  }
  .table_row {
    display: table;
    width: 100%;
    border-collapse: separate;
    padding-bottom: 20px;
    margin: 5% auto 0;
    text-align: center;
  }
  .table_small {
    display: table-row;
  }
  .table_row>.table_small:first-child>.table_cell:last-child {
    border-left: none;
  }
  .table_row>.table_small>.table_cell:first-child {
    border-left: #ccc 1px solid;
  }
  .table_row>.table_small:first-child>.table_cell:first-child {
    border-top-left-radius: 5px;
    border-top: #ccc 1px solid;
  }
  .table_row>.table_small:first-child>.table_cell:last-child {
    border-top-right-radius: 5px;
    border-top: #ccc 1px solid;
  }
  .table_row>.table_small:last-child>.table_cell:first-child {
    border-right: none;
  }
  .table_row>.table_small>.table_cell:last-child {
    border-right: #ccc 1px solid;
  }
  .table_row>.table_small:last-child>.table_cell:first-child {
    border-bottom-left-radius: 5px;
  }
  .table_row>.table_small:last-child>.table_cell:last-child {
    border-bottom-right-radius: 5px;
  }
}

<div class="table" id="results">
  <div class='theader'>
    <div class='table_header'>Header One</div>
    <div class='table_header'>Header Two</div>
    <div class='table_header'>Header Three</div>
    <div class='table_header'>Header Four</div>
  </div>
  <div class='table_row'>
    <div class='table_small'>
      <div class='table_cell'>Header One</div>
      <div class='table_cell'>-1.2726 -1.2726
      </div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Two</div>
      <div class='table_cell'>0.1311</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Three</div>
      <div class='table_cell'>-0.4782</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Four</div>
      <div class='table_cell'>-0.9919<br>-1.2726</div>
    </div>
  </div>
  <div class='table_row'>
    <div class='table_small'>
      <div class='table_cell'>Header One</div>
      <div class='table_cell'>-0.89</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Two</div>
      <div class='table_cell'>0.7986</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Three</div>
      <div class='table_cell'>0.876</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Four</div>
      <div class='table_cell'>0.498</div>
    </div>
  </div>
  <div class='table_row'>
    <div class='table_small'>
      <div class='table_cell'>Header One</div>
      <div class='table_cell'>-1.1669</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Two</div>
      <div class='table_cell'>0.4949<br>-1.2726</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Three</div>
      <div class='table_cell'>-0.7113</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Four</div>
      <div class='table_cell'>0.434</div>
    </div>
  </div>
  <div class='table_row'>
    <div class='table_small'>
      <div class='table_cell'>Header One</div>
      <div class='table_cell'>0.1996</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Two</div>
      <div class='table_cell'>-0.7693</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Three</div>
      <div class='table_cell'>1.974</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Four</div>
      <div class='table_cell'>-0.959</div>
    </div>
  </div>
  <div class='table_row'>
    <div class='table_small'>
      <div class='table_cell'>Header One</div>
      <div class='table_cell'>-1.5998</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Two</div>
      <div class='table_cell'>-0.1149</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Three</div>
      <div class='table_cell'>1.3888</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Four</div>
      <div class='table_cell'>-0.0689</div>
    </div>
  </div>
</div>

如何修正代码，使所有单元格的高度保持一致，并且所有单元格的高度都与行中最高的单元格相同？

修复代码，使所有单元格的高度保持一致，并且所有单元格的高度都与行中最高的单元格相同。