CSS Hell simulating TABLE with DIV

后端未结

关注

 8  1854

I´m trying to simulate a table using only CSS and DIV. The problem is that nothing that I do can perfectly simulate a table layout behavior.

Below is the table layout

相关标签:

8条回答

后悔当初

2020-12-10 03:48

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>

0 讨论(0)

夕颜

2020-12-10 03:53

Here's my attempt. It's probably not perfect, but it's a start. For me, It's working on the newest Chrome, Firefox, Safari, Opera, IE10, and IE9. Sorry, I don't have an IE7 to test with. I doubt it works, as IE7 was hard to deal with.

http://jsfiddle.net/nluis3294/uLuof882/

I think we all agree that you should use tables for tabular data, and divs for non-tabular data. In the ideal world, I think that's what everyone would do.

However, it's also ok to say that I want my non-tabular data to be aligned in a grid and that those rows and columns should stretch like a regular html table. That's a design choice, and it's totally legitimate. That is where the difficulties lie. You can use tables, which are much easier, but technically wrong. Or, you can use divs, and have to rely on tricks like background images, and faux columns, and spacers to get it to look like tables.

Using faux columns doesn't seem "correct" to me either. If you want to change the width of a column, you'd need to edit the background image. And using a background image to set background color seems weird to me. I have similar reservations about other tricks such as Psuedo columns, or tricks regarding negative margins. In my oppinion, they should just change the css to allow a simple way to get something that looks like a grid without tricks.

<div class="testTable">
<div class="testRow">
    <div class="testColumn1">
        aa
    </div>
    <div class="testColumn2">
        bb<br/>
        bbb2
    </div>
    <div class="testColumn3">
        cc<br/>
        cccc2
    </div>
    <div class="testColumn4">
        ffffdffffd<br/>
        ffffdffffd
    </div>

</div>
<div class="testRow">
    <div class="testColumn1">
        aa
    </div>
    <div class="testColumn2">
        bb<br/>
        bbb2
    </div>
    <div class="testColumn3">
        cc<br/>
        cccc2
    </div>
    <div class="testColumn4">
        ffffdffffd<br/>
        ffffdffffd
    </div>

</div>

<div class="testRow">
    <div class="testColumn1">
        aaa aaa
    </div>
    <div class="testColumn2">
        bb<br/>
        bbb2<br/>
        bbbbbbbbbbbbbbbbbbbb3

    </div>
    <div class="testColumn3">
        cccccc<br/>

    </div>
    <div class="testColumn4">
        ffffffffd<br/>
        ffffd
    </div>  
    </div>
</div>

CSS:

div.testTable{
    width: 30%; display: table; table-layout: auto;
    padding:0;
    margin:0;

}

div.testRow{
    display: table-row; width: 100%; 
white-space: nowrap;
    vertical-align:top;
    padding:0;
    margin:0;

}

div.testColumn1{
    display: table-cell; height:100%; min-width: 25%; background-color: #CCD9FF;    
    vertical-align:top;
    padding: 0.2em;

    border: 1px solid black;
    margin:0;

}

div.testColumn2{
    display: table-cell; height:100%; min-width: 25%;background-color: #ECFFE5; 
    vertical-align:top;
    padding: 0.2em;

    border: 1px solid black;
    margin:0;

}
div.testColumn3{
    display: table-cell; height:100%; min-width: 25%;background-color: #FFEBE5; 
    vertical-align:top;
    padding: 0.2em;

    border: 1px solid black;
    margin:0;

}

div.testColumn4{
    display: table-cell; height:100%; min-width: 25%;background-color: #FFFFCC; 
    vertical-align:top;
    padding: 0.2em;

    border: 1px solid black;
    margin:0;
}

0 讨论(0)

故里飘歌

2020-12-10 04:05

As far as I know, the only way to get around this is to explicitly set the height of your 'columns', otherwise the divs will default to height:auto, and will only be as big as the content within them. Setting the height can be dangerous if you have content that requires more space than the height will allow.

0 讨论(0)
发布评论:

提交评论
- 加载中...
你的背包

2020-12-10 04:06

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...
天涯浪人

2020-12-10 04:12

If you are presenting tabular data (multiple attributes of multiple similar entities, aka tabular data), use a <table> tag

0 讨论(0)
发布评论:

提交评论
- 加载中...

后悔当初

2020-12-10 04:12

div#tablecontainer
{
    width: 328px;
    display:table;
}

div.tablecontainerrow
{
    display:table-row;
}
div.tablecontainerrow div{
    display:table-cell;
    vertical-align:middle;
}

Of course, I think most current browsers handle this, except for MSIE...

0 讨论(0)

1 2 下一页