嵌套 DIV table 显示不正确
Nested DIV table displays incorrectly
我在编码嵌套 DIV table:
时遇到问题
.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/
嵌套的 table 个单元格不在同一 table 行上,而是在彼此下面,很奇怪。
那是因为 .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 classes 中有一些不必要的重复,即以下是相同的:
.divTable
、.divTable2
.divTableBody
, .divTable2Body
.divTableRow
, .divTable2Row
.divTableCell
, .divTable2Cell
- 等等
将它们合并为一个 class。
.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>
我在编码嵌套 DIV table:
时遇到问题.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/
嵌套的 table 个单元格不在同一 table 行上,而是在彼此下面,很奇怪。
那是因为 .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 classes 中有一些不必要的重复,即以下是相同的:
.divTable
、.divTable2
.divTableBody
,.divTable2Body
.divTableRow
,.divTable2Row
.divTableCell
,.divTable2Cell
- 等等
将它们合并为一个 class。
.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>