CSS：显示：块；与显示：表格；

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 及其子项的属性/关系非常不同。

关于 inline-block 和 inline-table 参见：What is the difference between inline-block and inline-table?

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

Answer 2

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

否则，您必须通过在结束/开始标签之间使用 html cmets（例如，在典型的水平导航中使用多个 <li> 元素）来消除多余的空白，或者将所有内容嵌入您的代码没有运营商退货（这是一个编辑噩梦）。

Answer 3

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

值得注意的是，

表生成一个称为表包装盒的主体块盒 包含表格框本身和任何标题框（在文档中 命令）。表框是一个块级框，包含表的 内部表格框。

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

Answer 4

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

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

Answer 5

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

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

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

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

https://jsfiddle.net/nnbonhc6/

Answer 6

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

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

在页脚表上有display: block !important;，看起来：

在页脚表上有display: table !important;，看起来：

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

Answer 7

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

因此，您可以获得一个可根据您的内容调整大小的框，但会单独留在其“行”中

Answer 8

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

Answer 9

我发现display:block 和display:table 之间的另一个区别在于，如果内容超过视口，display:block 将显示滚动条，display:table 不会