Question

我在特定大小的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>

我需要显示：阻止边距折叠以阻止在Firefox中工作。如果删除display：block，您应该注意到<p>标记之间的间距从10px扩展到20px。

这也是我之前发布的this问题的修改，但由于某些原因我不会让我编辑。我一直在搞乱我的互联网缓存，所以我可能弄乱了一个cookie。

Answer 1

您需要将table-layout: fixed添加到分配给表格的样式中，这就是全部。

Answer 2

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

Answer 3

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

Answer 4

删除

display: block;

更改此

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

到

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

直播演示

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

仅为块元素定义了边距折叠。

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

检查链接

http://www.w3.org/TR/CSS21/box.html#collapsing-margins

http://www.w3.org/TR/CSS21/visuren.html#block-box

保证金折叠的解决方案是

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

Answer 5

好的，这是我在Stack Overflow上的第一篇文章，我相信我已经解决了你的问题。我所做的只是改变“display：block;”这一行。到“位置：亲戚;”这似乎解决了“拉伸”问题。

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

Answer 6

我只是想知道..如果你指定div width =“600”然后要求表格适合100％..为什么不在表格上放宽度而不是包含div。
不要介意我，只是想知道除了边界崩溃之外你还想要实现什么。

Answer 7

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

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

Answer 8

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

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

}

Answer 9

您还需要将父元素定义为100％，因此表格知道它的百分比。

Answer 10

表格不使用display：block; 简单宽度：100％;应该做显示：块;特技。

永远不会，永远不会！

CSS：table {width：100％; display：block;}无法在Firefox中运行

10 个答案: