HTML设计-用div替换表格

Question

我有一个特定的设计，我需要使用<div>标签来完全实现，但是我无法使用<table>标签来实现，但是需要替换。要求专业知识。下面是设计：

下面是我一直在努力的代码：

<div>
  <div class="row">
    <div class="col">
      <input type="label" value="fees">
    </div>
    <div class="col">
      <input type="label" value="1,258">
    </div>
  </div>
  <div class="row">
    <div class="col">
      <input type="label" value="cost">
    </div>
    <div class="col">
      <input type="label" value="200">
    </div>
  </div>
  <div class="row">
    <div class="col">
      <input type="label" value="Grand Total">
    </div>
    <div class="col">
      <input type="label" value="1,458">
    </div>
  </div>
</div>

Answer 1

使用以下代码，并根据需要应用CSS ...

rm.na

.divTable{
	display: table;
	width: 400px;;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 0;
	display: table-cell;
	padding: 3px 10px;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}