我有一个特定的设计,我需要使用<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>
最佳答案
使用下面的代码并根据需要应用CSS...
.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;
}
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell" style="text-align:right;"> Fees</div>
<div class="divTableCell"> 1258</div>
</div>
<div class="divTableRow">
<div class="divTableCell" style="text-align:right;"> Cost</div>
<div class="divTableCell"> 20k</div>
</div>
<div class="divTableRow">
<div class="divTableCell" style="text-align:left; border-top: 1px solid #000;"> Grand Total</div>
<div class="divTableCell" style="border-top: 1px solid #000;"> 1458</div>
</div>
</div>
</div>
关于jquery - HTML设计-用div替换表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54760142/