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

Answer 2

First of all, take a look at Display Properties

In CSS3, you have ALL possibilities a table has, and then some more. You aren't using any of them, so give it a try

If you're dead set on your approach, try the Column Count property. I really don't understand your code, so for the sake of it, here's a generic sample for your 2 columns span

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

and for rows, you can simply apply block styles. Then again, you should use the CSS display options. Way easier and a lot less trouble