tags:

views:

49

answers:

3

I'm trying to generate a dynamic table using CSS:

<html>
<head>
  <style>
    div.el1, div.el2 {
        color:white;
        width:70px;height:70px;
        border:0px;
        padding:0px;
        font-size: 10px;
        font-family: "Courier";
    }

    div.el1 {
        background-color: green;
    }

    div.el2 {
        background-color: orange;
    }

    div.tablediv {
        display: table;
        border:0px;
        border-spacing:0px;
        border-collapse:separate;
    }

    div.celldiv {
        display: table-cell;
    }

    div.rowdiv {
        display: table-row;
        width:auto;
    }

</style>

</head>
<body>

<div class="tablediv">
    <div class="rowdiv">
        <div class="celldiv">
            <div class="el1" id="x1y1">ABC</div>
        </div>
        <div class="celldiv">
            <div class="el2" id="x1y2"></div>
        </div>
    </div>
    <div class="rowdiv">
        <div class="celldiv">
            <div class="el1" id="x2y1"></div>
        </div>
        <div class="celldiv">
            <div class="el1" id="x2y2"></div>
        </div>
    </div>
</div>

</body>
</html>

The content of body is dynamically generated and should be displayed as a table. Unfortunately, each cell shifts down if it contains data:

expected   reality
 --- ---    --- ---
|   |   |  |   |   |
 --- ---   |ABC|---
|   |   |  |   |   | 
 --- ---    --- ---
           |   |   |
            --- ---

I'm grateful for any help. Many thanks!


EDIT:

adding vertical-align: middle; to div.celldiv fixed the problem, yet I don't understand the reasons. Especially since the content is still aligned to the top of the cell.

+3  A: 

I can help... use a table!

If it's for tabular data then using tables is perfect!

I know it's a bit of a crappy answer, but can you explain why you aren't using tables?

ILMV
Given that it is a 2x2 grid, there is a strong probability that it isn't tabular data.
David Dorward
I've been using tables for years, but intend to move to CSS. I found it easier to code if I have to i.e. highlight a cell.
MrG
But in this case all you're doing is changing the "table/tr/td" tags to "div" tags. And that in a pretty non-compatible way (I bet older browsers can't handle `display: table`). What's the point?
Vilx-
td:hover {background-color: pink} <-- cell highlighting?
ILMV
A: 

Simply add float to your cell, and you'll get the right result. Working example and code:

<html>
<head>
  <style>
    div.el1, div.el2 {
        color:white;
        width:70px;height:70px;
        border:0px;
        padding:0px;
        font-size: 10px;
        font-family: "Courier";
    }

    div.el1 {
        background-color: green;
        float:left;
    }

    div.el2 {
        background-color: orange;
        float:right;
    }

    div.tablediv {
        display: table;
        border:0px;
        border-spacing:0px;
        border-collapse:separate;
    }

    div.celldiv {
        display: table-cell;
    }

    div.rowdiv {
        display: table-row;
        width:auto;
    }

</style>

</head>
<body>

<div class="tablediv">
    <div class="rowdiv">
        <div class="celldiv">
            <div class="el1" id="x1y1">ABC</div>
        </div>
        <div class="celldiv">
            <div class="el2" id="x1y2">aaa</div>
        </div>
    </div>
    <div class="rowdiv">
        <div class="celldiv">
            <div class="el1" id="x2y1">bbb</div>
        </div>
        <div class="celldiv">
            <div class="el1" id="x2y2">ccc</div>
        </div>
    </div>
</div>

</body>

Marcos Placona
My example contain only 2x2 cells, but in reality it's way more (up to 100x100). Hence I assume that float: right, float: left wouldn't work out.
MrG
+1  A: 

I think you may be confused with your intent to "move to CSS" - using CSS doesn't mean scrapping all meaningful HTML and replacing every tag with a <div>.

Using CSS for web development means using the most appropriate HTML tag, then styling it with CSS. In your case, you are making a table of tabular data, therefore you should use the <table> element as normal.

Even if your data isn't really tabular data then you still don't need to use that horrid mess of <div> tags, you only need one for each box (i.e. four tags in total), with a width, optional height, and float:left applied.

Both these solutions will be way more cross-browser than display:table anyway.

DisgruntledGoat