Css tables for rowspan and colspan
I am creating a table from a div and need a method to replicate the effect of a cell that spans 5 rows and a cell that spans 2 columns.
This is what I have for the fiddle http://jsfiddle.net/dwlamb/ce0haca0/1/ . Everything I've tried ends up breaking the layout.
If it makes it easier for you to figure out what I have done so far, comment out the border in .cell.empty
the css to see all the borders.
As I said in this fiddle, I need a div that will span two columns. My plan is to hide the expanded row div in smaller browsers <769px and hide the two column div with a resolution> 768px
source to share
colspan
and rowspan
are not available in CSS, they are really specific to real table tags / elements .
You should rethink your / imbrication structure if it has some meaning :).
<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 available and can be used: DEMO 2
display:table-header-group;
also available: DEMO 3
source to share
First of all, have a look at Display Properties
In CSS3, you have ALL the possibilities a table has, and then a few more. You are not using any of them, so try
If you're dead in your approach, try the Count property of the column Count. I don't really understand your code, so for the sake of that, here's a generic sample for your 2 columns covers
.cell{
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
and for lines you can just apply block styles. Again, you must use CSS display options. The way is easier and much less problematic
source to share