Правильная генерация таблицы с помощью CSS: неожиданное смещение ячеек - PullRequest
Новая
       26

Правильная генерация таблицы с помощью CSS: неожиданное смещение ячеек

2 голосов
/ 17 марта 2010

Я пытаюсь создать динамическую таблицу с помощью 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>

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

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

Я благодарен за любую помощь.

EDIT :

добавление выравнивания по вертикали: середина; чтобы div.celldiv исправил проблему, пока не понимаю причины. Тем более что содержимое все еще выровнено по верху ячейки.

Ответы [ 3 ]

3 голосов
/ 17 марта 2010

Я думаю, что вы можете быть озадачены вашим намерением «перейти на CSS» - использование CSS не означает, что нужно отказаться от всего значимого HTML и заменить каждый тег на <div>.

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

Даже если ваши данные на самом деле не являются табличными данными, вам все равно не нужно использовать этот ужасный беспорядок тегов <div>, вам нужен только один для каждого блока (т.е. всего четыре тега), с шириной необязательная высота и float:left применяется.

Оба эти решения будут намного более кроссбраузерными, чем display:table.

3 голосов
/ 17 марта 2010

Я могу помочь ... использовать таблицу!

Если это для табличных данных, то использование таблиц идеально!

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

0 голосов
/ 17 марта 2010

Просто добавьте float в вашу ячейку, и вы получите правильный результат. Рабочий пример и код: 

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

1006 *

...