如何（以及为什么）使用 display: table-cell (CSS)

Question

我有一个网站非常活跃的背景（我说的是 6 个左右不同的 z-index 2 动画）。我想要一个有内容的前景，但想要一个 "window" 到它的背景。我遇到的一些问题：

你不能在后台"punch a hole"，所以...
- 我构建了一个包含 div，我们称它为 "srminfo"
- 里面有 "top"、"left"、"window"、"right" 和 "bottom"
- 顶部、左侧、右侧、底部都有不透明的白色背景
- 而 srminfo 和 window divs 有 background:none;
无论我怎么努力，"right" div 都填不上 "top" 和 [=45= 之间的 space ] divs，我尝试了很多不同的东西。它必须是动态的原因是 "left" div 中的文本是基于背景颜色的动态文本，它本身是用 JavaScript.
[= 随机生成的30=]

如何显示：table；以及所有其他相关的 CSS 代码，例如 tables？以及如何使用？

Answer 1

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

display: table;

令人惊讶的是，关于如何实际让它工作的在线信息非常少，甚至在这里，“如何”：

要使用这段奇妙的代码，您需要回想一下 table 是构造 HTML 的唯一真正方法，即语法。要获得 2 行 3 列的 table，您必须执行以下操作：

<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 列中文本设置的自动高度。赢了！

#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），因此根据您对浏览器兼容性的需求，这可能不是你要找的答案。

Answer 2

CSS 属性的 display:table 系列大部分都在那里，因此可以根据它们定义 HTML 表。因为它们与特定标签结构的联系如此紧密，所以除此之外它们看不到太多用处。

如果您要在您的页面中使用这些属性，您将需要一个与表格非常相似的标记结构，即使您实际上并没有使用 <table> 系列标签。最小版本将是单个容器元素 (display:table)，具有可以全部表示为行的直接子元素 (display:table-row)，它们本身具有可以全部表示为单元格的直接子元素 (display:table-cell).还有其他属性可以让您模仿 table 系列中的其他标签，但它们需要 HTML 中的类似结构。否则，将很难（如果不是不可能的话）充分利用这些属性。

Answer 3

使用父 > 子选择器关系更容易，因此内部 div 不需要显式定义它们的 css 类：

.display-table {
    display: table; 
}
.display-table > div { 
    display: table-row; 
}
.display-table > div > div { 
    display: table-cell;
    padding: 5px;
}

<div class="display-table">
    <div>
        <div>0, 0</div>
        <div>0, 1</div>
    </div>
    <div>
        <div>1, 0</div>
        <div>1, 1</div>
    </div>
</div>

Answer 4

How (and why) to use display: table-cell (CSS)

我只是想提一下，因为我不认为任何其他答案直接做到了，"why" 的答案是：没有充分的理由，你可能永远不应该这样做。

在我十多年的 Web 开发经验中，我想不出有哪一次比拥有一堆 <div> 和 display 样式更好只有 table 个元素。

我能想到的唯一假设是，如果您有以某种非HTML-table 格式（例如 CSV 文件）存储的表格数据。在这种情况的一个非常具体的版本中，可能更容易只在所有内容周围添加 <div> 标签，然后添加基于后代的样式，而不是添加实际的 table标签。

但这是一个极其人为的例子，在所有真实情况下，我知道简单地使用 table 标签会更好。

如何（以及为什么）使用 display: table-cell (CSS)

How (and why) to use display: table-cell (CSS)

html

css

css-tables

HTML

CSS