表格布局与内部div

Question

我想要一个简单的表格布局，但我的HTML在行和单元格之间包含额外的DIV：

＆＃13;

＆＃13;

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  width: 80px;
}

ul {
  display: table-row-group;
}

.inter {
  /* display: ??? */
}

＆＃13;

<div class='table'>
  <div class='row'>
    <div class='cell'>
      Head 1
    </div>
    <div class='cell'>
      Head 2
    </div>
  </div>
  <ul>
    <li class='row'>
      <div class='inter'>
        <!-- this div spoils the layout -->
        <div class='cell'>
          Cell 11
        </div>
        <div class='cell'>
          Cell 12
        </div>
      </div>
    </li>
    <li class='row'>
      <div class='inter'>
        <div class='cell'>
          Cell 21
        </div>
        <div class='cell'>
          Cell 22
        </div>
      </div>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

如果没有“div.inter”，结果将是完美的。知道如何制作具有这个额外div的正确布局表吗？

这是小提琴：https://jsfiddle.net/Olin9/d7kvgweg/

Answer 1

这里最完美的是使用display: contents，这意味着元素将被他们的孩子取代。不幸的是，只有Firefox支持。演示：

＆＃13;

＆＃13;

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  width: 80px;
}

ul {
  display: table-row-group;
}

.inter {
  display: contents;
}

＆＃13;

<div class='table'>
  <div class='row'>
    <div class='cell'>
      Head 1
    </div>
    <div class='cell'>
      Head 2
    </div>
  </div>
  <ul>
    <li class='row'>
      <div class='inter'>
        <!-- this div spoils the layout -->
        <div class='cell'>
          Cell 11
        </div>
        <div class='cell'>
          Cell 12
        </div>
      </div>
    </li>
    <li class='row'>
      <div class='inter'>
        <div class='cell'>
          Cell 21
        </div>
        <div class='cell'>
          Cell 22
        </div>
      </div>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

但是要在所有浏览器中工作，我建议你在这里使用表格嵌套，如果你需要保留你的标记。对于此特定示例，请指定.row display: table。

＆＃13;

＆＃13;

.row {
  display: table;
}

.cell {
  display: table-cell;
  width: 80px;
}

ul {
  display: table-row-group;
}

.inter {
  display: table-row;
}

＆＃13;

<div class='table'>
  <div class='row'>
    <div class='cell'>
      Head 1
    </div>
    <div class='cell'>
      Head 2
    </div>
  </div>
  <ul>
    <li class='row'>
      <div class='inter'>
        <!-- this div spoils the layout -->
        <div class='cell'>
          Cell 11
        </div>
        <div class='cell'>
          Cell 12
        </div>
      </div>
    </li>
    <li class='row'>
      <div class='inter'>
        <div class='cell'>
          Cell 21
        </div>
        <div class='cell'>
          Cell 22
        </div>
      </div>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;