我在编写嵌套 DIV 表时遇到问题:
.divTable {
display: table;
width: 100%;
}
.divTableRow {
display: table-row;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
}
.divTableCell,
.divTableHead {
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;
}
.divTable2 {
display: table;
width: 100%;
}
.divTable2Row {
display: table-row;
}
.divTable2Cell,
.divTable2Body {
display: table-row-group;
}
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<!-- this row contains a nested 2x2 table -->
<div class="divTableCell">outer left </div>
<div class="divTableCell">outer right
<div class="divTable2">
<div class="divTable2Body">
<div class="divTable2Row">
<div class="divTable2Cell">inner 1st line left</div>
<div class="divTable2Cell">inner 1st line right</div>
</div>
<div class="divTable2Row">
<div class="divTable2Cell">inner 2nd line left</div>
<div class="divTable2Cell">inner 2nd line right</div>
</div>
</div>
</div>
</div>
</div>
<div class="divTableRow">
<!-- no nested table here -->
<div class="divTableCell">outer left</div>
<div class="divTableCell">outer right</div>
</div>
</div>
<!-- end div divTable Body -->
</div>
<!-- end div divTable -->
https://jsfiddle.net/jsrookey/0z0agxad/
嵌套的表格单元格不在同一个表格行线上,而是在彼此的下面,很奇怪。
最佳答案
那是因为 .divTable2Cell
有 display: table-row-group;
而不是 display: table-cell;
。
.divTable {
display: table;
width: 100%;
}
.divTableRow {
display: table-row;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
}
.divTableCell,
.divTable2Cell,
.divTableHead {
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;
}
.divTable2 {
display: table;
width: 100%;
}
.divTable2Row {
display: table-row;
}
.divTable2Body {
display: table-row-group;
}
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<!-- this row contains a nested 2x2 table -->
<div class="divTableCell">outer left </div>
<div class="divTableCell">outer right
<div class="divTable2">
<div class="divTable2Body">
<div class="divTable2Row">
<div class="divTable2Cell">inner 1st line left</div>
<div class="divTable2Cell">inner 1st line right</div>
</div>
<div class="divTable2Row">
<div class="divTable2Cell">inner 2nd line left</div>
<div class="divTable2Cell">inner 2nd line right</div>
</div>
</div>
</div>
</div>
</div>
<div class="divTableRow">
<!-- no nested table here -->
<div class="divTableCell">outer left</div>
<div class="divTableCell">outer right</div>
</div>
</div>
<!-- end div divTable Body -->
</div>
<!-- end div divTable -->
FWIW 你在 CSS 类中有一些不必要的重复,即以下是相同的:
.divTable
,.divTable2
.divTableBody
,.divTable2Body
.divTableRow
,.divTable2Row
.divTableCell
,.divTable2Cell
- 等等
将它们合并为一个类。
.table {
display: table;
width: 100%;
}
.tbody {
display: table-row-group;
}
.thead {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.tfoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.tr {
display: table-row;
}
.td,
.th {
display: table-cell;
padding: 3px 10px;
}
<div class="table">
<div class="tbody">
<div class="tr">
<div class="td">outer left </div>
<div class="td">outer right
<div class="table">
<div class="tbody">
<div class="tr">
<div class="td">inner 1st line left</div>
<div class="td">inner 1st line right</div>
</div>
<div class="tr">
<div class="td">inner 2nd line left</div>
<div class="td">inner 2nd line right</div>
</div>
</div>
</div><!-- .table -->
</div>
</div>
<div class="tr">
<div class="td">outer left</div>
<div class="td">outer right</div>
</div>
</div>
</div>
关于html - 嵌套的 DIV 表显示不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43659768/