Html CSS：显示：块；vs 显示：表格；

CSS: display:block; vs display:table;

提问by B T

Is there a difference between display:block;and display:table;? It looks to me like the display type of the dom-node containing table-rowand table-cellnodes doesn't matter. MDN says that display:table;makes it behave like a table, but doesn't elaborate on what that behavior is. What is that behavior?

有没有之间的差异display:block;和display:table;？在我看来，包含table-row和table-cell节点的 dom-node 的显示类型无关紧要。MDN 说这display:table;使它表现得像一个 table，但没有详细说明这种行为是什么。那是什么行为？

Similarly, is there a difference between display:inline-block;and display:inline-table;?

同样，display:inline-block;和之间有区别display:inline-table;吗？

采纳答案by Jason

Comparing the two (block and table), I don't know of any core differences (there may be minor ones) you would see within a vacuum. I believe the major differences are specifically to children. Tables and their children have very different attributes/relationships than a div and its children.

比较两者（块和表），我不知道您会在真空中看到的任何核心差异（可能有小差异）。我相信主要的区别是专门针对儿童的。表及其子项与 div 及其子项具有非常不同的属性/关系。

As far as inline-block and inline-table see: What is the difference between inline-block and inline-table?

至于 inline-block 和 inline-table 看到： inline-block 和 inline-table 有什么区别？

This article (http://css-tricks.com/almanac/properties/d/display/) has some interesting information, specifically regarding all the different display properties related to a table.

这篇文章 ( http://css-tricks.com/almanac/properties/d/display/) 有一些有趣的信息，特别是关于与表相关的所有不同显示属性。

回答by Alex W

I was researching this today, and I found this section of the CSS spec to be helpful: http://www.w3.org/TR/CSS21/tables.html#model

我今天正在研究这个，我发现 CSS 规范的这一部分很有帮助：http: //www.w3.org/TR/CSS21/tables.html#model

Notably,

尤其，

the table generates a principal block box called the table wrapper box that contains the table box itself and any caption boxes (in document order). The table box is a block-level box that contains the table's internal table boxes.

表格生成一个称为表格包装盒的主要块框，其中包含表格框本身和任何标题框（按文档顺序）。表格框是一个块级框，包含表格的内部表格框。

As I understand it, this essentially means the browser generates an invisible container block for anything with display: table!

据我了解，这实质上意味着浏览器会为任何带有display: table!

回答by zevbrokeit

Both will be block-level, in that they won't display next to anything else, by default.

两者都是块级的，因为默认情况下它们不会显示在其他任何东西旁边。

There is a significant difference in the actual display of the element. display: block;will extend to 100% of the available space, while display: table;will only be as wide as its contents.

元素的实际显示存在显着差异。display: block;将扩展到可用空间的 100%，而display: table;仅与其内容一样宽。

Also, as others have mentioned, display: table;is required to get display: table-cell;or other table-stuff to work in the descendents.

此外，正如其他人所提到的，display: table;需要获取display: table-cell;或其他table-东西才能在后代中工作。

I only know this because I just ran into the problem of trying to get the display: table;to fill the width of the container. I haven't been able to see if there is a difference in the display of display: inline;and display: inline-table;.

我只知道这一点，因为我刚刚遇到了试图display: table;填充容器宽度的问题。我一直无法看到display: inline;和的显示是否有差异display: inline-table;。

https://jsfiddle.net/nnbonhc6/

https://jsfiddle.net/nnbonhc6/

回答by josinalvo

One difference that seems to exist is that display:tableclears the line (as a display:blockwould) but does not expand to fill the line (a display block would take the maximum amount of width, an inline would not)

似乎存在的一个区别是display:table清除该行（就像display:block那样）但不会扩展以填充该行（显示块将占用最大宽度，内联则不会）

So you can get a box that resizes with your content, but stays alone in its "line"

所以你可以得到一个盒子，它会随着你的内容调整大小，但保持在它的“行”中

回答by tricon

One major benefit of using display: tableinstead of display: blockon a parent element is that you can safely use display: inline-blockon the child elements, without having to worry about the white-space between the children.

在父元素上使用display: table代替的一个主要好处display: block是您可以安全地display: inline-block在子元素上使用，而不必担心子元素之间的空白。

Otherwise you'd have to get rid of that extra white-space by using html comments between the closing/opening tags (for example with multiple <li>elements for the typical horizontal nav), or putting everything in-line in your code without carrier returns (which is an editing nightmare).

否则，您必须通过在结束/开始标签之间使用 html 注释（例如，<li>典型水平导航的多个元素）来摆脱多余的空白，或者将所有内容都放在代码中，而无需运营商返回（这是一个编辑噩梦）。

回答by zlx_star

Recently I find another example for the difference between display: blockand display: table

最近我找到了另一个例子来说明display: block和display: table

I take the email template from litmus:

我从 litmus 中获取电子邮件模板：

<table class="row footer">
  <tbody>
    <tr>
      <td class="wrapper">

        <table class="six columns">
          <tbody><tr>
            <td class="left-text-pad">

              <h5>Connect With Us:</h5>

              <table class="tiny-button facebook">
                <tbody><tr>
                  <td>
                    <a href="#">Facebook</a>
                  </td>
                </tr>
              </tbody></table>

              <br>

              <table class="tiny-button twitter">
                <tbody><tr>
                  <td>
                    <a href="#">Twitter</a>
                  </td>
                </tr>
              </tbody></table>

              <br>

              <table class="tiny-button google-plus">
                <tbody><tr>
                  <td>
                    <a href="#">Google +</a>
                  </td>
                </tr>
              </tbody></table>

            </td>
            <td class="expander"></td>
          </tr>
        </tbody></table>

      </td>
      <td class="wrapper last">

        <table class="six columns">
          <tbody><tr>
            <td class="last right-text-pad">
              <h5>Contact Info:</h5>
              <p>Phone: [phone]</p>
              <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
            </td>
            <td class="expander"></td>
          </tr>
        </tbody></table>

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

with display: block !important;on footer table, It looks:

与display: block !important;上页脚表，它看起来：

with display: table !important;on footer table, It looks:

与display: table !important;上页脚表，它看起来：

The snapshot is take with mail application on iOS 10.0.1.

快照是使用 iOS 10.0.1 上的邮件应用程序拍摄的。

回答by icube

there is another difference i found between display:blockand display:tablein that when either have position:fixed, top:0, left:0, right:0, bottom:0, overflow:auto, if the content exceeds the viewport, display:blockwillshow the scrollbar and display:tablewill not

我发现display:block和之间的另一个区别display:table在于，当有position:fixed, top:0, left:0, right:0, bottom:0, 时overflow:auto，如果内容超出视口，display:block将显示滚动条，display:table而不会

回答by user9141607

Basically, display:inline-block allows elements to stack below each others without any media queries. If you set elements to display:table-cell, you can't change their layout without using a media query.

基本上， display:inline-block 允许元素在没有任何媒体查询的情况下彼此堆叠。如果将元素设置为 display:table-cell，则不使用媒体查询就无法更改它们的布局。

回答by EcchiOli

Additionally: on a wordpress theme with a complex CSS in which there were conflicting effects on a special class area, I just couldn't get that area centered because of the CSS conflicts. Eventually, the only way to get that part centered was to switch it from display: inline-block to display:table, and then at last it accepted the centering rules, be they text-align or margin:0 auto.

另外：在具有复杂 CSS 的 wordpress 主题上，在特殊类区域上存在冲突效果，由于 CSS 冲突，我无法使该区域居中。最终，使该部分居中的唯一方法是将其从 display: inline-block 切换到 display:table，然后它最终接受了居中规则，无论是 text-align 还是 margin:0 auto。

I'm not claiming my case is statistically significant, just providing personal experience feedback, in case other folks in similar distress stumble upon this page after web searches :)

我并不是说我的案例具有统计意义，只是提供个人经验反馈，以防其他处于类似困境的人在网络搜索后偶然发现此页面:)