html - 为什么我应该使用 display:table 而不是 table

Question

用 div 构建我的网站并应用 display:table 属性（display:tr，display:tr）有什么好处。这是否意味着 div 的行为与 tr 和 td 元素完全一样？

我知道我可能根本不应该使用表格或表格行为进行布局，但我只是好奇是否有区别和好处？

score 15 · Accepted Answer

用 div 构建我的网站并应用 display:table 属性（display:tr，display:tr）有什么好处。

在我看来，什么都没有，除了你取消了与旧浏览器的兼容性。使用 DIVdisplay: table-*比<table>s 更好的想法是愚蠢的 IMO，以及对表格元素完全错误的歇斯底里的结果。（不是攻击你@Nimo，只是批评一些把“桌子是邪恶的”模因过分的人。）

表格应该用于表示表格数据，而不是被误用于布局。

然而，表格的某些功能仍然很难使用纯 CSS 来模拟。您要么需要大量的 hack，有时甚至需要基于 JavaScript 的变通方法才能使这些东西正常工作。

您应该以不依赖这些能力的方式设计布局。

在极少数情况下，您确实需要它们。但是，不管你使用的是正确的<table><tr>还是脑死亡<div style="display: table"><div style="display: table-row">的（顺便说一句，哪个更语义化并且可读性更好？）

如果你需要 display: table-*你的布局，你手头有一种罕见的情况，或者你已经把自己画在一个角落里。无论哪种方式，使用<table>，您至少可以获得一致的浏览器支持。

score 8 · Accepted Answer

下面解释了为什么在 TABLE 元素上使用 DIV。

表格元素的优点：大多数设计师使用表格来获得一致的外观。桌子也很容易维护。table 的另一个优点是它与大多数浏览器兼容。

表格元素的缺点：所有这些都是有代价的：太多的嵌套表格会增加页面大小和下载时间。更多的表格元素将重要内容向下推，因此搜索蜘蛛不太可能将内容添加到搜索引擎。

DIV 元素的优点： div 与 CSS 我们可以实现相同的基于表格的页面结构并减少页面上的元素数量，从而使页面加载更快。它还使页面与搜索引擎蜘蛛更兼容。

DIV 元素的缺点：这样做的主要缺点是并非所有 CSS 元素都与浏览器不兼容。因此，我们必须编写一些自定义 CSS 来解决问题。

display: table告诉元素显示为表格。嵌套元素应显示为表格行和表格单元格，模仿良好的旧 TR 和 TD。还有一个display: table-column但它应该什么都不显示，只像 COL 一样提供样式信息。我不确定这到底是如何工作的。

score 6 · Accepted Answer

显示：表格；并不意味着您将 div 转换为表格，它只是使某些属性（如垂直对齐）在通常不会的地方工作。这与使用表格进行布局不同。

score 0 · Accepted Answer

表格只能用于表示表格数据。div 是对内容进行分组的容器。就那么简单。display: table只为您提供表格的布局属性。但它与 <IE7 不兼容，因此为了优雅降级，请避免使用它。

4 回答 4