css tables for rowspan and colspan

Question

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

Answer 1

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