如何（以及为什么）使用显示：表格单元格 (CSS)

我有一个网站very活动背景（我说的是 6 个左右不同的 z 索引，这里 2 个带有动画）。我想要一个有内容的前景，但想要一个通向背景的“窗口”。我遇到的一些问题：

1. 你不能在背景上“打洞”，所以......

   • 我构建了一个包含 div，我们称之为“srminfo”
   • 里面有一个“顶部”、“左侧”、“窗口”、“右侧”和“底部”
   • 上、左、右、下都是不透明的白色背景
   • 而 srminfo 和窗口 div 有背景：无；

2. 无论我多么努力，“右”div 都无法填充“顶部”和“底部”div 之间的空间，我尝试了很多不同的东西。它必须是动态的原因是“左侧”div 中的文本是基于背景颜色的动态文本，背景颜色本身是用 JavaScript 随机生成的。

如何显示：表格；以及所有其他相关的 CSS 代码（例如表格）？以及如何使用它？

经过几天的努力寻找答案，我终于找到了

显示：表；

令人惊讶的是，网上关于如何实际使其发挥作用的信息非常少，即使在这里也是如此。"How":

要使用这段奇妙的代码，您需要回想一下表格是构建 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; }

正如您在下面的示例中看到的，第三列中的 div 没有内容，但遵循前 2 列中的文本设置的自动高度。赢！

#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 (谢谢，费利佩阿尔斯），因此根据您对浏览器兼容性的需求，这可能不是您正在寻找的答案。