Question

display:block;和display:table;之间有区别吗？在我看来，包含table-row和table-cell节点的dom节点的显示类型无关紧要。 MDN says that display:table; makes it behave like a table，但没有详细说明这种行为是什么。那是什么行为？

同样，display:inline-block;和display:inline-table;之间是否存在差异？

Answer 1

比较两者（块和表），我不知道你会在真空中看到的任何核心差异（可能有一些小的差异）。我认为主要的差异是针对儿童的。表格和他们的孩子与div及其孩子有着截然不同的属性/关系。

就内联块和内联表而言，请参阅：What is the difference between inline-block and inline-table?

本文（http://css-tricks.com/almanac/properties/d/display/）提供了一些有趣的信息，特别是关于与表相关的所有不同显示属性。

Answer 2

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

值得注意的是，

该表生成一个称为表包装盒的主要块框包含表格框本身和任何标题框（在文档中订购）。表格框是一个包含表格的块级别框内部餐桌。

据我了解，这实质上意味着浏览器会为display: table的任何内容生成一个不可见的容器块！

Answer 3

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

元素的实际显示存在显着差异。 display: block;将扩展到可用空间的100％，而display: table;只会扩展到其内容。

此外，正如其他人所提到的，display: table;需要display: table-cell;或其他table-内容才能在后代中发挥作用。

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

https://jsfiddle.net/nnbonhc6/

Answer 4

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

否则你必须通过在关闭/打开标签之间使用html注释（例如，使用典型水平导航的多个<li>元素）来消除额外的空白区域，或者将所有内容放入 - 代码中的行没有运营商返回（这是编辑的噩梦）。

Answer 5

最近，我找到了display: block和display: table

之间差异的另一个例子

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

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

在页脚表上显示display: block !important;，它看起来是：

在页脚表上显示display: table !important;，它看起来是：

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

Answer 6

似乎存在的一个区别是display:table清除了线条（如display:block那样）但是没有展开以填充线条（显示块将占用最大宽度，内联不会）

因此，您可以获得一个可以根据您的内容调整大小的方框，但不要单独使用＆＃34; line＆＃34;

Answer 7

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

Answer 8

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

CSS：display：block; vs display：table;

8 个答案: