Question

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

这就是我对小提琴http://jsfiddle.net/dwlamb/ce0haca0/1/所拥有的。我试过的任何东西都会破坏布局。

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

正如我在那个小提琴中所说，我想要一个跨越两列的div。我的计划是在较小的浏览器中隐藏跨越的行div＆lt; 769px并隐藏分辨率> 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

Answer 2

首先，看看Display Properties

在CSS3中，您拥有表所具有的所有可能性，然后还有更多可能性。你没有使用它们中的任何一个，所以试一试

如果您的方法已经设置为死，请尝试列计数属性。我真的不明白你的代码，所以为了它，这里是你的2列跨度的通用样本

.cell{
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}

对于行，您可以简单地应用块样式。然后，您应该使用CSS显示选项。方式更容易，麻烦更少

rowspan和colspan的css表

2 个答案: