html - 当单元格跨越到 n 列时，如何将表格列向下移动？

Question

我的 HMTL 布局显示为带有表格行和表格单元格的表格。如果我想扩展一个特定的单元格，使其跨越 2 列，相邻的单元格应该向下移动，因为空间已经被扩展的单元格占据。

在下面的示例中，我想让第 1 行第 1 列占据两列。所以第 1 列第 2 列应该向下移动 1 行。这在 HTML/CSS 中可能吗？

正常布局:

预期结果:

HTML:

<div>
  <div class="table-custom">
    <div class="table-row">
      <div class="table-cell" colspan="2">
        <div>Row 1 Column 1</div>
      </div>
      <div class="table-cell">
        <div>Row 1 Column 2</div>
      </div>
      <div class="table-cell">
        <div>Row 1 Column 3</div>
      </div>
    </div>
    <div class="table-row">
      <div class="table-cell">
        <div>Row 2 Column 1</div>
      </div>
      <div class="table-cell">
        <div>Row 2 Column 2</div>
      </div>
      <div class="table-cell">
        <div>Row 2 Column 3</div>
      </div>
    </div>
  </div>
</div>

这是我的 JSFiddle:https://jsfiddle.net/vg0L7m2y/

Answer 1

你为什么不使用<table>并使用 colspan与 cellspacing达到你想要的结果？

这是一个working example