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

问题描述:

使用divs构建我的网站并应用display:table属性(display:tr,display:tr)的好处是什么。这不是意味着div将表现得完全像tr和td元素?

What's the benefits of structuring my site with divs and apply the display:table property ( display:tr, display:tr). Doesn't this mean that the divs will behave exactly like tr and td elements?

我知道我可能不应该使用表或表行为布局,但我

I know I probably shouldn’t use tables or table behavior for layout at all but I'm just curious if there's a difference and a benefit?


有什么好处?网站与divs并应用display:table属性(display:tr,display:tr)。

What's the benefits of structuring my site with divs and apply the display:table property ( display:tr, display:tr).

在我看来,除了你带走与旧版浏览器的兼容性。用 display:table - * 使用DIV的方法比< table> 和对表元素完全误导的歇斯底里的结果。 (不攻击你的@Nimo,只是批评一些人已经采取了表是邪恶的模因太远了。)

None whatsoever in my opinion, except that you take away compatibility with older browsers. The idea that using DIVs with display: table-* is somehow better than <table>s is idiotic IMO, and the result of totally misguided hysteria against table elements. (Not attacking you @Nimo, just criticizing some people who have taken the "tables are evil" meme too far.)

表应该用于表示表格数据,不要被滥用于布局。

Tables are supposed to be used to represent tabular data, not to be misused for layouting.

然而,有一些能力,表格仍然很难使用纯CSS模拟。你需要大量的黑客,有时甚至需要基于JavaScript的解决方法,以使这些工作。

There are, however, certain abilities that tables have that are still very hard to simulate using pure CSS. You either need massive hacks and sometimes even JavaScript based workarounds to make those things work.

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

You should design your layouts in a way that don't rely on those abilities.

在少数情况下,您 需要它们。但是,无论是使用适当的< table>< tr> 还是脑死亡< div style = display:table>< div style =display:table-row> (其中一个更具语义性,可读性更好)

In some rare cases, you do need them. But then, it doesn't matter whether you use a proper <table><tr> or a brain-dead <div style="display: table"><div style="display: table-row"> (which one is more semantic and better readable by the way?)

如果您需要为您的布局需要 display:table - * 你已经把自己画在一个角落反正。无论如何,使用< table> ,您至少可以获得一致的浏览器支持。

If you need display: table-* for your layout, you have one of those rare cases at hand, or you have painted yourself in a corner anyway. Either way, with a <table>, you at least get consistent browser support.