CSS：display：block; vs display：table;

Is there a difference between display:block; and display:table;? It looks to me like the display type of the dom-node containing table-row and table-cell nodes 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之间有区别吗?并显示:table;?在我看来,包含表格行和表格单元节点的dom节点的显示类型无关紧要。 MDN说显示:table;使它表现得像一个表,但没有详细说明该行为是什么。那是什么行为?

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

同样,display:inline-block之间是否有区别;并显示:inline-table;?

8 个解决方案

#1

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 it's children.

比较两者(块和表),我不知道你会在真空中看到的任何核心差异(可能是次要的)。我认为主要的差异是针对儿童的。表和他们的孩子具有非常不同的属性/关系而不是div和它的孩子。

As far as inline-block and inline-table see: What is the difference between inline-block and 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/)提供了一些有趣的信息,特别是关于与表相关的所有不同显示属性。

#2

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生成一个不可见的容器块!

#3

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.

元素的实际显示存在显着差异。显示:块;将扩展到100%的可用空间,同时显示:table;只会与其内容一样宽。

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

另外,正如其他人所提到的,显示:table;需要显示:table-cell;或其他表格在后代工作。

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;.

我只知道这个,因为我遇到了试图获取显示的问题:table;填充容器的宽度。我无法看到显示器的显示是否有差异:内联;并显示:inline-table;。

https://jsfiddle.net/nnbonhc6/

#4

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

使用display的一个主要好处是:table而不是display:block on parent元素是你可以安全地在子元素上使用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注释(例如,使用典型水平导航的多个

元素)来消除额外的空白区域,或者将所有内容放入代码中承运人返回(这是编辑的噩梦)。

#5

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

最近我找到了display:block和display:table之间区别的另一个例子

I take the email template from 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: 408.341.0600</p>
              <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
            </td>
            <td class="expander"></td>
          </tr>
        </tbody></table>

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

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

with display:block!important;在页脚表上,它看起来:

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

带显示:table!important;在页脚表上,它看起来:

The snapshot is take with mail application on iOS 10.0.1.

快照与iOS 10.0.1上的邮件应用程序一起使用。

#6

One difference that seems to exist is that display:table clears the line (as a display:block would) 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 will)但不扩展以填充该行(显示块将占用最大宽度,内联不会)

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

因此,您可以获得一个可以根据您的内容调整大小的框,但不要单独使用其“行”

#7

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 :)

我没有声称我的案例具有统计意义,只是提供个人经验反馈,以防其他类似遇险的人在网页搜索后偶然发现此页面:)

#8

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,则无法在不使用媒体查询的情况下更改其布局。

#1