rowspan 和 colspan 的 css 表

Question

我正在用 div 创建一个表格，需要一种方法来复制一个跨 5 行的单元格和一个跨 2 列的单元格的效果。

这就是我的 fiddle http://jsfiddle.net/dwlamb/ce0haca0/1/ .我尝试过的任何方法最终都会破坏布局。

如果可以更容易地弄清楚我到目前为止所做的事情，请在 css 中注释掉 .cell.empty 中的边框以查看所有边框。

正如我在那个 fiddle 中所说的那样，我想要一个跨越两列的 div。我的计划是在较小的浏览器 <769px 下隐藏跨行 div，在分辨率 >768px 下隐藏两列 div

Answer 1

colspan 和 rowspan 在 CSS 中不可用，它们确实特定于真实表格标签/元素。

如果它有一些意义，你应该重新考虑你的结构/嵌套:)。

DEMO

<div class="tablelayout">
  <h1 class="cell"> title</h1>
  <div class="cell ">
    <h2 class="tablelayout">subtitle</h2>
    <div class="tablelayout">
      <div class="row">
        <p class="cell"> Cell </p>
        <p class="cell"> Cell </p>
      </div>
      <div class="row">
        <p class="cell"> Cell </p>
        <p class="cell"> Cell </p>
      </div>
      <div class="row">
        <p class="cell"> Cell </p>
        <p class="cell"> Cell </p>
      </div>
    </div>
  </div>
</div>

display:table-caption 可用并可使用: DEMO 2

display:table-header-group; 也可用: DEMO 3