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

display:block之间是否存在差异和
显示：表格？在我看来，包含
表行
和
表单元格
节点的dom节点的显示类型并不重要，但没有详细说明这种行为是什么。那是什么行为

类似地，
display:inline块和
显示：内联表
 比较这两个（块和表），我不知道在真空中你会看到什么核心差异（可能有细微的差异）。我相信主要的区别是针对儿童的。表及其子表与div及其子表具有非常不同的属性/关系

关于内联块和内联表，请参见：

本文（）提供了一些有趣的信息，特别是关于与表相关的所有不同显示属性的信息。
在父元素上使用
display:table
而不是
display:block
的一个主要好处是，您可以在子元素上安全地使用
display:inline block
，不用担心孩子之间的空白

否则，您必须在结束/开始标记之间使用html注释（例如，对于典型的水平导航，使用多个
元素），或者在代码中插入所有内容而不返回运营商（这是一个编辑噩梦），以消除多余的空白，我发现CSS规范的这一部分很有帮助：

值得注意的是

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

据我所知，这本质上意味着浏览器为任何带有
display:table
的内容生成一个不可见的容器块
 另外：在一个具有复杂CSS的wordpress主题上，在一个特殊的类区域上有冲突的效果，因为CSS冲突，我无法使该区域居中。最终，使该零件居中的唯一方法是将其从“显示：内联块”切换到“显示：表格”，然后它最终接受居中规则，无论是文本对齐还是边距：0自动

我并不是说我的情况在统计上很重要，只是提供个人经验反馈，以防其他处于类似困境的人在网络搜索后偶然发现此页面：）
这两个页面都是块级别的，默认情况下，它们不会显示在任何其他页面旁边

元素的实际显示存在显著差异<代码>显示：块将扩展到100%的可用空间，而
显示：表格的宽度仅与其内容相同

另外，正如其他人所提到的，
display:table显示：表格单元格需要code>或其他
表-
在子代中工作的内容

我之所以知道这一点，是因为我刚刚遇到了获取
display:table的问题以填充容器的宽度。我一直无法看到
display:inline的显示是否有差异和
显示：内联表

最近我发现另一个例子说明了
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>


联系我们：




联系方式：
电话：408.341.0600

电邮：


使用
显示：阻止！重要的在页脚表上，它看起来：


使用
显示：表格！重要的在页脚表上，它看起来：


快照是在iOS 10.0.1上使用邮件应用程序拍摄的。
一个似乎存在的区别是
显示：表格
清除行（就像
显示：块
那样），但不会扩展以填充行（显示块将占用最大宽度，内联块不会）

因此，您可以得到一个框，它可以根据内容调整大小，但只保留在其“行”中。基本上，display:inline块允许元素彼此堆叠，而无需任何媒体查询。如果将元素设置为“显示：表格单元格”，则在不使用媒体查询的情况下无法更改其布局。
我发现
display:block
和
display:table
之间还有另一个不同之处，即当其中一个元素有
位置：fixed
，
顶部：0
，
左侧：0
，
右侧：0
，
底部：0
，
overflow:auto
，如果内容超出了视口，
display:block
将显示滚动条，而
display:table
将不会
另一个答案使“表现得像表格”的含义更加明确。我看到的两个主要区别是，元素中的一些子元素是表行，而另一些子元素不是表行，这取决于元素的display:table还是display:block。谢谢-1用于忽略以下事实：
display:block
占用100%的可用宽度，而
display:tab