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

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

提问by Jim

I have a site with a veryactive background (I'm talking 6 or so different z-indexes here 2 with animations). I wanted a in the foreground that had content but wanted a "window" through to the background in it. Some problems I had:

我有一个背景非常活跃的网站（我在这里谈论 6 个左右不同的 z-indexes 2 与动画）。我想要一个在前景中有内容但想要一个“窗口”到背景的“窗口”。我遇到的一些问题：

1. you can't "punch a hole" in a background, so...

   • I built a containing div, lets call it "srminfo"
   • Inside that I had a "top", "left", "window", "right" and "bottom"
   • the top, left, right, bottom all had opaque white backgrounds
   • while the srminfo and window divs had background:none;

2. No matter how hard I tried, the "right" div wouldn't fill the space between the "top" and "bottom" divs, I tried a lot of different things. The reason it had to be dynamic is that the text in the "left" div was dynamic based on the background colour, which was itself generated randomly with JavaScript.

1. 你不能在背景中“打一个洞”，所以......

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

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

How is display: table; and all the other related CSS code like tables? And how can it be used?

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

回答by Jim

After days trying to find the answer, I finally found

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

display: table;

显示：表；

There was surprisingly very little information available online about how to actually getting it to work, even here, so on to the "How":

令人惊讶的是，网上关于如何实际让它工作的信息非常少，即使在这里也是如此，“如何”：

To use this fantastic piece of code, you need to think back to when tables were the only real way to structure HTML, namely the syntax. To get a table with 2 rows and 3 columns, you'd have to do the following:

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

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

Similarly to get CSS to do it, you'd use the following:

同样要让 CSS 做到这一点，您可以使用以下内容：

HTML

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

CSS

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

As you can see in the JSFiddle example below, the divs in the 3rd column have no content, yet are respecting the auto height set by the text in the first 2 columns. WIN!

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

http://jsfiddle.net/blyzz/1djs97yv/1/

http://jsfiddle.net/blyzz/1djs97yv/1/

It's worth noting that display: table;does not work in IE6 or 7 (thanks, FelipeAls), so depending on your needs with regards to browser compatibility, this may not be the answer that you are seeking.

值得注意的是，display: table;它在 IE6 或 7 中不起作用（谢谢，FelipeAls），因此根据您对浏览器兼容性的需求，这可能不是您想要的答案。

回答by Dmitriy Sintsov

It's even easier to use parent > child selector relationship so the inner div do not need to have their css classes to be defined explicitly:

使用 parent > child 选择器关系更容易，因此内部 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>

回答by machineghost

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

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

I just wanted to mention, since I don't think any of the other answers did directly, that the answer to "why" is: there is no good reason, and you should probably never do this.

我只是想提一下，因为我认为其他任何答案都没有直接做到，“为什么”的答案是：没有充分的理由，您可能永远不应该这样做。

In my over a decade of experience in web development, I can't think of a single time I would have been better served to have a bunch of <div>s with displaystyles than to just have table elements.

在我 10 多年的 Web 开发经验中，我想不出有哪一次比只有表格元素更适合拥有一堆<div>带有display样式的s 。

The only hypothetical I could come up with is if you have tabular data stored in some sort of non-HTML-table format (eg. a CSV file). In a very specific version of this case it mightbe easier to just add <div>tags around everything and then add descendent-based styles, instead of adding actual table tags.

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

But that's an extremely contrived example, and in all real cases I know of simply using table tags would be better.

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

回答by The Spooniest

The display:tablefamily of CSS properties is mostly there so that HTML tables can be defined in terms of them. Because they're so intimately linked to a specific tag structure, they don't see much use beyond that.

该display:tableCSS属性的家庭大多有使HTML表格可以在他们来界定。因为它们与特定的标签结构如此紧密地联系在一起，所以除此之外他们看不到太多用途。

If you were going to use these properties in your page, you would need a tag structure that closely mimicked that of tables, even though you weren't actually using the <table>family of tags. A minimal version would be a single container element (display:table), with direct children that can all be represented as rows (display:table-row), which themselves have direct children that can all be represented as cells (display:table-cell). There are other properties that let you mimic other tags in the tablefamily, but they require analogous structures in the HTML. Without this, it's going to be very hard (if not impossible) to make good use of these properties.

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