css表rowspan和colspan [英] css tables for rowspan and colspan

问题描述

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

我为一个小提琴做了什么 http://jsfiddle.net/dwlamb/ce0haca0/1/ 。

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

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

解决方案

colspan 和 rowspan 在CSS中不可用，这些是真正特定于真实标签/元素。

如果它具有某些含义，您应该重新考虑您的结构/ imbrication。）

strong> DEMO

 < div class =tablelayout> 
< h1 class =cell>标题< / h1> 
< div class =cell> 
< h2 class =tablelayout> subtitle< / h2> 
< div class =tablelayout> 
 
< 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

I am creating a table out of div's and need a method replicating the effect of a cell that spans 5 rows and a cell that spans 2 columns.

This is what I have for a fiddle http://jsfiddle.net/dwlamb/ce0haca0/1/. Anything I have tried ends up breaking the lay-out.

If it makes it easier to figure out what I have done so far, comment out border in .cell.empty in the css to view all borders.

As I have stated in that fiddle, I want a div that will span the two columns. My plan is to hide the spanned row div at smaller browsers <769px and hide the two-column div at resolutions >768px

解决方案

colspan and rowspan are not avalaible in CSS, these are really specific to real table tag/elements.

You should rethink your structure/imbrication if it has some meanings :).

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 is avalaible and could be used : DEMO 2

display:table-header-group; is avalaible too : DEMO 3

这篇关于css表rowspan和colspan的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！