为什么`display：table`存在？

Question

在我的另一个问题cell spacing in div table中，每个人都说表格比div表更好，其中一个提到没有好处div表超过html表。我很困惑，为什么display: table会介绍它，如果可怕的话，它是什么意思呢？

Answer 1

显示表在单元间距和拉伸方面表现出某种特定的方式。使用其他方法很难再现这种行为。 HTML <table>元素只应用于表格数据（想想Excel电子表格）。一个是显示行为，另一个是语义（有意义）标记。你可能想要使用一个没有另一个，这就是为什么它们是两个不同的东西。

如果您有表格数据，请使用<table>进行标记，并免费获取表格显示行为。如果您的某些内容确实不是表格数据，但是您希望使用表格的行为来显示它，请在其上打一个CSS表格显示行为。

Answer 2

无论在任何特定情况下使用表格或div是否更好的任何其他考虑，display:table存在（以及相关display:table-row和display:table-cell）的原因是因为CSS是能够将任意HTML（甚至XML）渲染到所需的布局中，而无需将任何样式效果硬编码到浏览器中。

标准<table>，<tr>，<td>等元素应用了大量默认样式;并且在很多方面与其他元素的行为完全不同。 display:table复制了这些不同的行为。

现代浏览器因此可以简单地使用display:table作为table元素的默认样式，而不是必须在引擎中内置硬编码的特定于表的渲染，就像旧版本一样浏览器。

Answer 3

是否使用其中一个或另一个的选择更多地基于使用表格而不是布局。一个好的经验法则是当你真正尝试使用数据“表”时使用表格。

Answer 4

底线是HTML标记（<table>）应该描述是的内容，而CSS（display:table）描述内容应该的样子< / em>的。它们不一样。

您可以在非表格元素上使用它，但是当您想要设置实际表格的显示属性时，display:table是唯一正确的选择。

这是一个容易理解的例子：

<div class="my-tables">
    <table>...</table>
    <table>...</table>
    <table>...</table>
</div>

.my-tables table {
    display:none; /* hide all the tables */
}

你如何显示其中一个表，比如说第一个？

.my-tables table:first-child {
    /* display:block; not quite... */
    display:table; /* There it is! */
}

表格是标记表格内容的正确工具。用于布局的表仅是否会滥用标记。使用<p>或<fieldset>进行布局同样会出错。