CSS：表格{宽度：100％；显示：块；} 在 Firefox 中不起作用答案

【问题标题】：CSS: table {width:100%; display:block;} not working in FirefoxCSS：表格{宽度：100％；显示：块；} 在 Firefox 中不起作用
【发布时间】：2014-12-04 00:30:39
【问题描述】：

我在特定大小的 div 中有一个 html 表格。我希望表格应用边距折叠并 100% 宽。这是我的代码。它在 IE8 中呈现我想要的效果，而在 Firefox 中却不正确。 Firefox 可能正确地执行规范，但无论如何。如何修复我的 css 以在两种浏览器中工作？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>

<style type="text/css">
table
{
    border-collapse: collapse;
    border-spacing: 0;
}

table
{
    margin: 10px 0;
    width: 100%;
    display: block;
}

p
{
    margin: 10px 0;
}

td, th
{
    border: 1px solid #000000;
}

</style>
</head>

<body>

<div style="width: 600px; border: 1px purple solid;">

<p>Some text at the top.  Notice that the margin collapse does not work unless display:block.</p>

<table>
    <tr>
        <th></th>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>Label 1</td>
        <td>1.A</td>
        <td>1.B</td>
        <td>1.c</td>
    </tr>
    <tr>
        <td>Label 2</td>
        <td>2.A</td>
        <td>2.B</td>
        <td>2.c</td>
    </tr>
</table>

<p>Some text at the bottom.  Notice that the margin collapse does not work unless display:block.  Its stupid.</p>


</div>

</body>

</html>

我需要用于边距折叠的 display:block 才能在 Firefox 中工作。如果您删除 display:block，您应该注意到<p> 标签之间的间距从 10px 扩大到 20px。

这也是对我之前发布的this 问题的编辑，但由于某种原因它不允许我编辑。我一直在搞乱我的互联网缓存，所以我可能搞砸了一个 cookie。

【问题讨论】：

移除显示：块；来自css

标签： html css

【解决方案1】：

您需要将table-layout: fixed 添加到分配给表格的样式中，仅此而已。

【讨论】：

我实际上有一个 div 设置为 display: table;，它不尊重 Firefox 中的 width:100%;，这修复了它。谢谢

【解决方案2】：

使用display: table，您的问题将得到解决。

【讨论】：

这让我发疯了——我有一些 javascript 来切换项目的显示，它在“none”和“block”之间强制，这当然弄乱了我的 TABLE 显示。
也差点把我逼疯了。我正在使用可能导致此问题的引导程序
这适用于with: 100%。有什么东西也适用于max-width: 100%？

【解决方案3】：

只需删除display: block;，边框折叠即可正常工作

【讨论】：

【解决方案4】：

移除

display: block;

改一下

table
{
    margin: 10px 0;
    width: 100%;
    display: block;
}

到

table
{
    margin: 10px 0;
    width: 100%;
}

现场演示

http://jsfiddle.net/dN5DM/1/

边距折叠仅针对块元素定义。

桌子很特别。在 CSS 规范中，它们并不完全是块元素 - 特殊规则适用于大小和位置，它们的子元素（显然）和表格元素本身。

检查链接

边距折叠的解决方案是

您可以使用 1 像素的顶部填充或边框来避免边距折叠。

【讨论】：

边距折叠在 Firefox 中不起作用。表格顶部和底部的边距与 p 一起添加，而不是折叠到 10px。
@maggie 边距折叠仅针对块元素定义，我再次更新后检查。
我希望边距在桌子上折叠，因此我将其定义为块元素。我应该做其他事情来达到同样的效果吗？我正在使用 display:block 基于与这篇文章类似的推理：stackoverflow.com/questions/136727/…
@maggie "您可以使用 1 像素的顶部填充或边框来避免边距折叠。"
我希望边距折叠。如果有一个<p> 底部边距为 10 像素，而旁边的表格顶部边距为 10 像素，我只希望有一个 10 像素的空间，而不是 20 像素。我是在使用术语margin collapsing write吗？

【解决方案5】：

好的，这是我在 Stack Overflow 上的第一篇文章，我相信我已经解决了您的问题。我所做的只是更改“显示：块；”行到“位置：相对；”这似乎解决了“拉伸”问题。

我使用的是 Chromium，当表格没有像 Internet Explorer 中那样伸展时，我理解您的意思。我知道 Chromium 和 Firefox 处理页面非常相似，所以这可能已经解决了您的问题。

【讨论】：

【解决方案6】：

我只是想知道.. 如果您指定 div width="600" 然后要求表格适合 100%.. 为什么不在表格上放置宽度而不是包含 div。
别介意我，只是想知道除了边框折叠之外你具体想要实现什么。

【讨论】：

【解决方案7】：

您还需要将父元素定义为 100%，以便表格知道它的百分比。

【讨论】：

【解决方案8】：

您可以通过添加一个简短的 JScritp 来解决任何宽度问题...首先将其添加到您的 BODY 标签：onload="autoadjustw";以及 head 标签中的这个小脚本：

function autoadjustw(){
   AN=document.getElementById("parent_object").offsetWidth;
   document.getElementById("Table_Id").style.width=AN+"px";
}

【讨论】：

【解决方案9】：

如果删除显示：IE 中的块中断使用 '\9' 来定位 IE，例如：

table 
{ 
    margin: 10px 0; 
    width: 100%; 
    display: block\9; /*for ie only"*/

}

【讨论】：

这是一个很好的提示。在这种情况下，IE 会呈现我想要的样子；根据代码是否应该是这样，这是我不关心的另一个故事。

【解决方案10】：

表格不使用 display: block; 简单宽度：100%；应该做显示：块；把戏。

从来没有，永远不会！

【讨论】：

哇！你是个天才！谢谢！