CSS Hell, имитирующий TABLE с DIV

Я пытаюсь смоделировать таблицу, используя только CSS и DIV. Проблема в том, что ничего, что я делаю, может отлично имитировать поведение макета таблицы.

Ниже представлен макет таблицы, который я хочу и сразу ниже этого, что я мог бы достичь с помощью CSS/DIV:

Макет с таблицей /CSS и таблицей /CSS http://i53.tinypic.com/2ujjk0w.jpg

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>

Что я могу изменить, чтобы макет CSS/DIV напоминал CSS/таблицу?

Некоторая дополнительная информация

Подумайте, как упражнение (вызов). Поэтому, пожалуйста, не давайте мне ответов, говоря, что использование таблицы является лучшим решением для этой ситуации.

На самом деле я задаюсь вопросом, какое решение может полностью изменить табличное расположение данных на другое, просто изменив CSS. В этом случае использование <table> не может быть и речи.

Я хочу совместимость с IE 7+, FF3 +, Chrome 4 +.

Спасибо!

Ответы

Ответ 1

Опять же, вы должны использовать таблицу.

Но если это всего лишь упражнение в CSS, для пинков...

Поверните <div class="clear" />.
Отключите цвета фона и вместо этого используйте faux-columns.
Не устанавливайте границы вокруг отдельных ячеек; вместо этого разместите их вокруг строк.
Дайте строкам a overflow:hidden

Так же: 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>

Ответ 2

Использование таблиц в макетных страницах не очень профессионально, но использование таблиц для отображения таблиц в порядке - это то, для чего они должны использоваться. Эмулирование таблиц с использованием div и css слишком сильно приближает css.

Ответ 3

Это ужасный ответ, я не могу поверить, что я даже предлагаю его, НО, если вы чертовски настроены сделать таблицу из div...

Как указано в комментариях, если это таблица, используйте таблицу, таблицы не являются злыми, они просто были чрезмерно использованы в свое время, чтобы делать то, для чего они не были предназначены. Они предназначены для отображения табличных данных, поэтому, если вы можете, используйте их.

Это предлагается только в том случае, если вы ДОЛЖНЫ сделать таблицу с divs

В CSS есть малоизвестное свойство отображения, которое поможет вам в этом, читайте здесь: table-cell css.

Опять же, просто используйте таблицу, если сможете.

Ответ 4

Если вы представляете табличные данные (несколько атрибутов нескольких похожих объектов, а также табличные данные), используйте тег <table>

Ответ 5

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

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

Конечно, я думаю, что большинство современных браузеров справляются с этим, за исключением MSIE...

Ответ 6

Насколько я знаю, единственный способ обойти это - явно указать высоту ваших "столбцов", иначе divs будет по умолчанию height: auto и будет только размером с контент внутри них. Установка высоты может быть опасной, если у вас есть контент, для которого требуется больше места, чем позволяет высота.

Ответ 7

Супер раздражающая проблема, просто появилась на работе. Обычно я использую фон для решения этой проблемы, но так как все должно быть отзывчивым, сейчас раздражает делать изображения для каждого запроса СМИ. Это единственный раз, когда я буду использовать JavaScript для достижения того, чего хочу. Глупо, что он не поддерживается.

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:

$(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

    /**
     * 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/

Ответ 8

Здесь моя попытка. Это, наверное, не идеально, но это начало. Для меня он работает над новейшими браузерами Chrome, Firefox, Safari, Opera, IE10 и IE9. Извините, у меня нет IE7 для тестирования. Я сомневаюсь, что это работает, поскольку IE7 трудно справиться.

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

Я думаю, мы все согласны с тем, что вы должны использовать таблицы для табличных данных и divs для не табличных данных. В идеальном мире я думаю, что все будут делать.

Тем не менее, также можно сказать, что я хочу, чтобы мои не табличные данные были выровнены в сетке, и что эти строки и столбцы должны растягиваться, как обычная таблица html. Это выбор дизайна, и он полностью легитимный. Вот где трудности лежат. Вы можете использовать таблицы, которые намного проще, но технически неправильно. Или вы можете использовать divs и должны полагаться на трюки, такие как фоновые изображения, а также столбцы faux и разделители, чтобы они выглядели как таблицы.

Использование искусственных столбцов для меня тоже не кажется "правильным". Если вы хотите изменить ширину столбца, вам нужно будет отредактировать фоновое изображение. И использование фонового изображения для установки цвета фона кажется мне странным. У меня есть подобные оговорки в отношении других трюков, таких как столбцы Psuedo, или трюки относительно отрицательных полей. В моем oppinion, они должны просто изменить 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

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