CSS table simulation

Forum Moderators: not2easy

Message Too Old, No Replies

CSS table simulation

trying to take a table using CSS

YayoZ

8:22 pm on Jun 12, 2008 (gmt 0)

I am trying to simulate a table using CSS. The best way I could think of was using the "display" attribute with the value "table". My problem is that I want to have different cells to have different lengths so it looks more like group of boxes put together. When I run the following code it sets the height of both cells to 200px which is not I want. Any idea?

<html>

<head>

#csstable {display: table;}
.cssrow {
display: table-row;
}
.csscell {display: table-cell;}

#area1{
border: solid 1px;
height: 200px;
width: 100px;
}

#area2{
border: solid 1px;
height: 100px;
width: 400px;
}

</STYLE>
</head>

<body>

<div id="csstable">
<div class="cssrow">
<div class="csscell" id = "area1">Stuff1</div>
<div class="csscell" id = "area2">Stuff2</div>
</div>
<div class="cssrow">
<div class="csscell" id = "area3">Stuff3</div>
<div class="csscell" id = "area4">Stuff4</div>
</div>
</div>

</body>

</html>

swa66

12:35 am on Jun 13, 2008 (gmt 0)

I think you might find display:table less than well supported in e.g. IE.

And colspans or rowspans don't exist in CSS 2.1, they might (or might not) make it to CSS3:
[w3.org...]

Xapti

7:23 am on Jun 13, 2008 (gmt 0)

First of all, you don't really need to specify the class "csscell", and likely not even "cssrow" as you could just use the css selector "#csstable div div{}".

More importantly: You want to simulate tables, but you want two cells in the same row to have different heights? That statement is conflicting! the whole point of a table is for all cells in the same row to have the same height, and all element in the same column have the same width...
If that's not what you want, why do you say you are trying to simulate a table?

As as swa66 mentioned, display:table is not well enough supported to be used yet, assuming you're catering to a typical internet population, and you don't plan to use javascript emulation.

In conclusion: my logical guess is that you don't know much about the fact divs can be floated to get the layout you desire. If this is true, you can learn a bit about floats, and EASILY get this layed out.

SuzyUK

10:10 am on Jun 13, 2008 (gmt 0)

Hi YayoZ, and Welcome to WebmasterWorld!

the CSS table properties, (yes not supported in IE) act exactly the same way as an HTML table, therefore just as we can't get cells of differing heights with an HTML table, nor can we with the table properties.

floats might be what you're looking for? the css below gos with your HTML above, as an example.. is that kind of what you're after?

#csstable {width: 600px; margin: 0 auto;}
.cssrow {float: left; width: 500px; clear: both;}
.csscell {
float: left;
border: 1px solid #000;
}
#area1, #area4 {
height: 200px;
width: 98px;
}
#area2, #area3 {
height: 100px;
width: 398px;
}