我想使用div元素創建一個表,并在div類table-row下創建一個table元素,并將其樣式化為table-row類下的table exact。 如何使用div元素創建這個表格結構,并在table-row類下創建一個表格。表格行類是表格類的父類。 table元素是table-row類的子元素。這樣做的要求是table元素應該正好在table-row類的下面。
我不 知道怎么做。我試圖這樣做,但是table元素并不完全在table-row類下。我不想使用表格元素。我想使用div元素。
.table {
display: table;
width: 100%;
border-collapse: collapse;
}
.table-header {
display: table-header-group;
}
.table-header-cell {
display: table-cell;
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
.table-body {
display: table-row-group;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
<div class="table">
<div class="table-header">
<div class="table-header-cell">Name</div>
<div class="table-header-cell">Age</div>
<div class="table-header-cell">Occupation</div>
</div>
<div class="table-body">
<div class="table-row">
<div class="table-cell">John Doe</div>
<div class="table-cell">30</div>
<div class="table-cell">Software Engineer</div>
<div class="detail-table-cell">
<table class="table">
<tr>
<td>hello</td>
<td>30</td>
<td>Engineer</td>
</tr>
<tr>
<td>Jaoe</td>
<td>25</td>
<td>doc</td>
</tr>
</table>
</div>
</div>
<div class="table-row">
<div class="table-cell">Jane Doe</div>
<div class="table-cell">25</div>
<div class="table-cell">Doctor</div>
<div class="detail-table-cell">
<table class="table">
<tr>
<td>fas</td>
<td>30</td>
<td>Endasfgineer</td>
</tr>
<tr>
<td>Jaoe</td>
<td>25</td>
<td>dfdasoc</td>
</tr>
</table>
</div>
</div>
</div>
</div>
上一篇vue不同角色頁面