CSS Hell simulating TABLE with DIV

This is a horrid answer, I can't believe I'm even suggesting it, BUT, if you are hell bent on making a table out of divs...

As is stated in the comments, if it is a table, use a table, tables are not evil, they were just overused at one time to do things they weren't designed for. They are designed to display tabular data so if you can, use them.

This is only suggested if you MUST make a table with divs

There is a little known display property in CSS to help you with this, read here: table-cell css.

Again, just use a table, if you can.


Using tables to layout pages is not very professional but using tables to display tables is perfectly ok - this is for what they should be used. Emulating tables using divs and css is taking css layouting way too far.


Again, you should use a table.

But if this is just an exercise in CSS, for kicks...

  • Ditch the <div class="clear" />.
  • Ditch the background colors and use faux-columns instead.
  • Don't put borders around the individual cells; instead put them around the rows.
  • Give the rows an overflow:hidden

Like so: http://jsfiddle.net/39F88/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Teste</title>
    <style type="text/css">
        table{
            table-layout:fixed;
            width: 333px;
            border-width: 1px;
            border-spacing: 2px;
            border-style: solid;
            border-color: black;
            border-collapse: collapse;
        }

        table th, table td
        {
            border-width: 1px;
            padding: 1px;
            border-style: solid;
            border-color: black;
            border-collapse: collapse;
        }

        table th.column1, table td.column1{
            width:60px;
            background-color:#CCD9FF;
        }

        table th.column2, table td.column2{
            width:100px;
            background-color:#ECFFE5;
        }

        table th.column3, table td.column3{
            width:60px;
            background-color:#FFEBE5;
        }

        table th.column4, table td.column4{
            width:100px;
            background-color: #FFFFCC;
        }

        div#tablecontainer
        {
            width:335px;
            border-top:1px solid black;
            background:url(http://i.stack.imgur.com/ZsO5U.png) TOP LEFT REPEAT-Y;
        }

        div.tablecontainerrow
        {
            clear:both;
            overflow:hidden;
            border:1px solid black;
            border-top:none;
        }

        div#tablecontainer div div.column1
        {
            width: 62px;
            float:left;
        }

        div#tablecontainer div div.column2
        {
            width: 104px;
            float:left;
        }

        div#tablecontainer div div.column3
        {
            width: 62px;
            float:left;
        }

        div#tablecontainer div div.column4
        {
            width: 104px;
            float:left;
        }


    </style>
</head>
<body>
    <h1>CSS and TABLE</h1>
    <table>
        <tr>
            <th class="column1">Header 1</th>
            <th class="column2">Header 2</th>
            <th class="column3">Header 3</th>
            <th class="column4">Header 4</th>
        </tr>
        <tr>
            <td class="column1">line 1 column 1</td>
            <td class="column2">line 1 column 2</td>
            <td class="column3">line 1 column 3</td>
            <td class="column4">line 2 column 4</td>
        </tr>
        <tr>
            <td class="column1">line 2 column 1</td>
            <td class="column2">line 2 column 2</td>
            <td class="column3">line 2 column 3</td>
            <td class="column4">line 2 column 4</td>
        </tr>
        <tr>
            <td class="column1">line 3 column 1</td>
            <td class="column2">line 3 column 2</td>
            <td class="column3">line 3 column 3 (more content)</td>
            <td class="column4">line 3 column 4</td>
        </tr>
    </table>
    <h1>CSS and DIV</h1>
    <div id="tablecontainer">
        <div class="tablecontainerrow">
            <div class="column1">Header 1</div>
            <div class="column2">Header 2</div>
            <div class="column3">Header 3</div>
            <div class="column4">Header 4</div>
        </div>
        <div class="tablecontainerrow">
            <div class="column1">line 1 column 1</div>
            <div class="column2">line 1 column 2</div>
            <div class="column3">line 1 column 3</div>
            <div class="column4">line 1 column 4</div>
        </div>
        <div class="tablecontainerrow">
            <div class="column1">line 2 column 1</div>
            <div class="column2">line 2 column 2</div>
            <div class="column3">line 2 column 3</div>
            <div class="column4">line 2 column 4</div>
        </div>
        <div class="tablecontainerrow">
            <div class="column1">line 3 column 1</div>
            <div class="column2">line 3 column 2</div>
            <div class="column3">line 3 column 3 (more content)</div>
            <div class="column4">line 3 column 4</div>
        </div>
    </div>
</body>
</html>

Tags:

Css

Recent Posts