嵌套的DIV表显示不正确

Question

我在编写嵌套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/

嵌套的表格单元格不在同一个表行行上，而是在彼此之下，奇怪的是。

Answer 1

这是因为.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>