2

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>

body のコンテンツは動的に生成され、表として表示されます。残念ながら、データが含まれている場合、各セルは下にシフトします。

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

どんな助けにも感謝します。

編集：

vertical-align: middle; を追加します。to div.celldiv 問題を修正しましたが、理由がわかりません。特に、コンテンツはまだセルの上部に配置されているためです。

4

3 に答える 3

3

私は助けることができます...テーブルを使用してください！

表形式のデータの場合は、テーブルを使用するのが最適です。

ちょっとくだらない答えだとは思いますが、テーブルを使用していない理由を説明していただけますか?

于 2010-03-17T09:46:25.307 に答える
3

「CSS に移行する」という意図と混同されている可能性があると思います。CSS を使用することは、意味のある HTML をすべて破棄し、すべてのタグを<div>.

Web 開発に CSS を使用するということは、最も適切なHTML タグを使用してから、CSS でスタイルを設定することを意味します。あなたの場合、表形式のデータのテーブルを作成しているため、<table>通常どおり要素を使用する必要があります。

データが実際には表形式のデータではない場合でも、その恐ろしい混乱した<div>タグを使用する必要はありません。幅、オプションの高さ、およびfloat:left適用された各ボックスに 1 つだけ必要です (つまり、合計 4 つのタグ)。

これらのソリューションはどちらも、display:tableとにかくクロスブラウザーです。

于 2010-03-17T14:37:19.517 に答える
0

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>

</p>

于 2010-03-17T09:48:52.560 に答える