[解決済み] display: table-cell の使い方（とその理由）（CSS）

質問

のあるサイトがあります。 非常に アクティブな背景（ここでは6つほどの異なるz-indexを話しています2つのアニメーション付き）。私は、コンテンツを持っていた前景にしたかったが、その中に背景への"ウィンドウ"を望んでいた。私が持っていたいくつかの問題。

1. 背景に穴をあけることはできません。

   • これを「srminfo」と呼びます。
   • その中に、"top", "left", "window", "right", "bottom" を配置しました。
   • 上、左、右、下はすべて不透明な白い背景でした。
   • srminfo と window divs は background:none になっています。

2. どんなに頑張っても、"right" divが"top" と"bottom" divの間のスペースを埋めることはできず、いろいろなことを試しました。動的でなければならない理由は、"left" div のテキストが、JavaScript でランダムに生成される背景色に基づいて動的になるようにしたためです。

display: table;などの関連するCSSコードは、どのようにテーブルのようになっているのでしょうか？また、どのように使うことができるのでしょうか？

どのように解決するのですか？

何日もかけて答えを見つけようとした結果、ようやく見つけたのは

display: テーブル。

実際に動作させる方法については、ここでも意外とネット上に情報が少なかったので、次に "方法"。

この素晴らしいコードを使うには、テーブルがHTMLを構造化する唯一の本当の方法だった頃、つまり構文に思いを馳せる必要があります。2行3列のテーブルを得るには、次のようにする必要があります。

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

同様にCSSにやらせる場合は、以下のようになります。

HTML

<div id="table">
    <div class="tr">
        <div class="td"></div>
        <div class="td"></div>
        <div class="td"></div>
    </div>
    <div class="tr">
        <div class="td"></div>
        <div class="td"></div>
        <div class="td"></div>
    </div>
</div>

CSS

#table{ 
    display: table; 
}
.tr{ 
    display: table-row; 
}
.td{ 
    display: table-cell; }

下の例でわかるように、3列目のdivにはコンテンツがありませんが、最初の2列のテキストで設定されたauto heightを尊重しています。WIN!

#table {
    display: table;
    padding: 5px;
}
.tr {
    display: table-row;
    padding: 5px;
}
.td {
    display: table-cell;
    padding: 5px;
    width: 150px;
    border: #000000 solid 1px;
    margin: 5px;
}

<div id="table">
    <div class="tr">
        <div class="td">Row 1,
            <br />Column 1</div>
        <div class="td">Row 1, Column 2</div>
        <div class="td" style="background:#888888;"></div>
    </div>
    <div class="tr">
        <div class="td">Row 2,
            <br />Column 1</div>
        <div class="td">Row 2, Column 2</div>
        <div class="td" style="background:#888888;"></div>
    </div>
</div>

注目すべきは display: table; はIE6、7では動作しません( FelipeAlsさん、ありがとうございます。 そのため、ブラウザの互換性についてのニーズによっては、これはあなたが求めている答えではないかもしれません。