CSS Hell 用 DIV 模拟 TABLE

Question

提问by outlookrperson

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.

我正在尝试仅使用 CSS 和 DIV 来模拟表格。问题是我所做的任何事情都不能完美地模拟表格布局行为。

Below is the table layout that I want and immediately below this one, what I could achieve with CSS/DIV:

下面是我想要的表格布局，紧挨着这个布局，我可以用 CSS/DIV 实现：

Html/CSS

html/css

<!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: 328px;
        }

        div.tablecontainerrow
        {
            clear:both;
        }

        div#tablecontainer div div.column1
        {
            width: 60px;
            float:left;
            border: 1px solid black;
            background-color:#CCD9FF;            
        }

        div#tablecontainer div div.column2
        {
            width: 100px;
            float:left;
            border: 1px solid black;
            background-color:#ECFFE5;            
        }

        div#tablecontainer div div.column3
        {
            width: 60px;
            float:left;
            border: 1px solid black;
            background-color:#FFEBE5;            
        }

        div#tablecontainer div div.column4
        {
            width: 100px;
            float:left;
            border: 1px solid black;
            background-color:#FFFFCC;            
        }


    </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 class="clear" />
        </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>

What might I modify to allow the CSS/DIV layout resembles the CSS/Table?

我可以修改哪些内容以允许 CSS/DIV 布局类似于 CSS/Table？

Some complementary information

一些补充信息

Think in this as an exercise (a challenge). So please do not provide me answers saying the use of a table is a better solution for this situation.
In fact I′m wondering a solution that can change completely the tabular layout of data to another one simply changing the CSS. In this case, the use of <table>is out of question.
I want compatibility with IE 7+, FF3+, Chrome 4+.

将此视为练习（挑战）。所以请不要给我提供答案，说使用表格是这种情况的更好解决方案。
事实上，我想知道一种解决方案，可以将数据的表格布局完全更改为另一种只需更改 CSS 的解决方案。在这种情况下，使用<table>是没有问题的。
我想要与 IE 7+、FF3+、Chrome 4+ 兼容。

Thanks!

谢谢！

Answer 1

回答by Richard JP Le Guen

Again, you should use a table.

同样，您应该使用表格。

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

但是，如果这只是 CSS 中的练习，那么踢...

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

抛弃<div class="clear" />.
抛弃背景颜色并使用人造柱代替。
不要在单个单元格周围放置边框；而是将它们放在行周围。
给行一个 overflow:hidden

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

像这样：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>

Answer 2

回答by Dariusz Walczak

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.

使用表格来布局页面不是很专业，但使用表格来显示表格是完全可以的 - 这是它们应该使用的。使用 div 和 css 模拟表格使 css 布局走得太远了。

Answer 3

回答by Jeremy B.

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...

这是一个可怕的答案，我不敢相信我什至在建议它，但是，如果你一心想要用 div 制作一张桌子......

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

仅当您必须使用 div 制作表格时才建议这样做

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

CSS 中有一个鲜为人知的 display 属性可以帮助您解决这个问题，请阅读此处：table-cell css。

Again, just use a table, if you can.

同样，如果可以的话，只需使用一张桌子。

Answer 4

回答by colinross

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

如果您要呈现表格数据（多个相似实体的多个属性，又名表格数据），请使用<table>标签

Answer 5

回答by Wrikken

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...

当然，我认为大多数当前的浏览器都会处理这个问题，除了 MSIE ......

Answer 6

回答by gdub

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.

据我所知，解决这个问题的唯一方法是明确设置“列”的高度，否则 div 将默认为高度：自动，并且只会与其中的内容一样大。如果您的内容需要比高度允许的更多空间，则设置高度可能会很危险。

Answer 7

回答by Michael E

Super annoying problem, just came up at work. I usually use an background to solve this problem but since everything needs to be responsive now it is annoying to make images for each Media Query. This is the only time I would use JavaScript to achieve what I want. Stupid that it is not supported.

超级烦人的问题，刚上班就遇到了。我通常使用背景来解决这个问题，但由于现在一切都需要响应，因此为每个媒体查询制作图像很烦人。这是我唯一一次使用 JavaScript 来实现我想要的。愚蠢的是它不受支持。

HTML:

HTML：

<ul class="table-layout clearfix">
    <li>
        <p>Header 1</p>
        <p>Header 1</p>
        <p>Header 1</p>
        <p>Header 1</p>
        <p>Header 1</p>
        <p>Header 1</p>
    </li>
    <li>
        <p>Header 1</p>
    </li>
    <li>
        <p>Header 1</p>
    </li>
</ul>

JavaScript:

JavaScript：

$(document).ready(function(){

    var height = 0;

    $(".table-layout li").each(function(i){

        if($(this).height() > height)
            height = $(this).height();

    });

    $(".table-layout li").css("height", height + 'px');

});

CSS:

CSS：

    /**
     * Markup free clearing.
     *
     * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack
     */
    .clearfix:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    /* IE6 */
    * html .clearfix {
      height: 1%;
    }
    /* IE7 */
    *:first-child + html .clearfix {
      min-height: 1%;
    }

    ul, li{
        margin:0;
        padding:0;
        list-style-type:none;
    }

    ul{
        width:335px;
        overflow:hidden;
    }

    ul li{
        width: 31.5%;
        float:left;
        border:1px solid #000;
        margin-right:4px;
    }

http://jsfiddle.net/kXrn5/6/

Answer 8

回答by NL3294

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.

这是我的尝试。这可能并不完美，但这是一个开始。对我来说，它适用于最新的 Chrome、Firefox、Safari、Opera、IE10 和 IE9。抱歉，我没有要测试的 IE7。我怀疑它是否有效，因为 IE7 很难处理。

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.

我想我们都同意你应该对表格数据使用表格，对非表格数据使用 div。在理想的世界中，我认为这就是每个人都会做的事情。

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.

但是，也可以说我希望我的非表格数据在网格中对齐，并且这些行和列应该像常规 html 表一样伸展。这是一种设计选择，完全合法。这就是困难所在。您可以使用表格，这要容易得多，但技术上是错误的。或者，您可以使用 div，并且必须依靠诸如背景图像、人造柱和间隔器之类的技巧才能使其看起来像表格。

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.

使用假列对我来说似乎也不“正确”。如果要更改列的宽度，则需要编辑背景图像。使用背景图像来设置背景颜色对我来说似乎很奇怪。我对其他技巧（例如 Psuedo 列）或有关负边距的技巧也有类似的保留意见。在我看来，他们应该只更改 css 以允许一种简单的方法来获得看起来像网格的东西而无需技巧。

<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">
        dddddd<br/>
        dddddd
    </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">
        dddddd<br/>
        dddddd
    </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">
        ddddd<br/>
        ddd
    </div>  
    </div>
</div>

CSS:

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;
}

CSS Hell 用 DIV 模拟 TABLE

提问by outlookrperson

Html/CSS

html/css

Some complementary information

一些补充信息

回答by Richard JP Le Guen

回答by Dariusz Walczak

回答by Jeremy B.

回答by colinross

回答by Wrikken

回答by gdub

回答by Michael E

回答by NL3294

相关推荐

最近更新

标签

CSS Hell 用 DIV 模拟 TABLE

提问by outlookrperson

Html/CSS

html/css

Some complementary information

一些补充信息

回答by Richard JP Le Guen

回答by Dariusz Walczak

回答by Jeremy B.

回答by colinross

回答by Wrikken

回答by gdub

回答by Michael E

回答by NL3294

相关推荐

CSS 文本对齐：居中；不工作

CSS 制作一行高度的空div

CSS 在 DIV 中居中 H1 标签

使用 DOM 样式通过 Javascript 获取或更改 CSS 类属性

相关推荐

最近更新

标签