Html CSS：表格{宽度：100％；display:block;} 在 Firefox 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3809804/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: table {width:100%; display:block;} not working in Firefox
提问by Maggie
I have an html table within a div of a specific size. I want the table to apply margin collapse and be 100% wide. Here is my code. It renders how I want it to in IE8 and incorrectly in Firefox. Firefox may be doing the spec correctly, but whatever. How do I fix my css to work in both browsers?
我在特定大小的 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>
I need the display:block for margin collapsing to work in Firefox. If you remove the display:block, you should notice that the spacing between the <p>tags widens from 10px to 20px.
我需要 display:block 用于边距折叠才能在 Firefox 中工作。如果移除 display:block，您应该注意到<p>标签之间的间距从 10px 扩大到 20px。
This is also an edit to thisquestion that I posted earlier, but it won't let me edit for some reason. I've been messing around with my internet cache so I probably messed up a cookie.
这也是对我之前发布的这个问题的编辑，但由于某种原因它不会让我编辑。我一直在搞乱我的互联网缓存，所以我可能搞砸了一个 cookie。
回答by Paul Phillips
You need to add table-layout: fixedto the style assigned to the table, that's all.
您需要添加table-layout: fixed到分配给表格的样式，仅此而已。
回答by Egemen Mede
Use display: tableand your problem will be solved.
使用display: table，您的问题将得到解决。
回答by y34h
just remove the display: block;, the border-collapse works fine
只需删除display: block;，边框折叠工作正常
回答by Pramendra Gupta
remove
消除
display: block;
change this
改变这个
table
{
margin: 10px 0;
width: 100%;
display: block;
}
to
到
table
{
margin: 10px 0;
width: 100%;
}
for live demo
用于现场演示
Margin collapsing is only defined for block elements.
边距折叠仅针对块元素定义。
Tables are special. In the CSS specs, they're not quite block elements - special rules apply to size and position, both of their children (obviously), and of the table element itself.
桌子很特别。在 CSS 规范中，它们不是完全块元素 - 特殊规则适用于它们的子元素（显然）和 table 元素本身的大小和位置。
check links
检查链接
- http://www.w3.org/TR/CSS21/box.html#collapsing-margins
- http://www.w3.org/TR/CSS21/visuren.html#block-box
- http://www.w3.org/TR/CSS21/box.html#collapsing-margins
- http://www.w3.org/TR/CSS21/visuren.html#block-box
Solution to margin collapsing is
边缘崩溃的解决方案是
You could use a 1-pixel top padding or border to avoid margins from collapsing.
您可以使用 1 像素的顶部填充或边框来避免边距折叠。
回答by Pramendra Gupta
Okay, this is my first post on Stack Overflow, and I believe I have solved your issue. All I did was change the line "display: block;" to "position: relative;" and that seemed to have fixed the "stretching" issue.
好的，这是我在 Stack Overflow 上的第一篇文章，我相信我已经解决了您的问题。我所做的只是更改“显示：块；”行 到“位置：相对；” 这似乎解决了“拉伸”问题。
I am using Chromium and I understood what you mean when the tables weren't stretching out as they were in Internet Explorer. I know Chromium and Firefox handle pages pretty similar, so that might have resolved your issue.
我正在使用 Chromium，当表格不像在 Internet Explorer 中那样伸展时，我理解您的意思。我知道 Chromium 和 Firefox 处理页面非常相似，所以这可能解决了您的问题。
回答by Robin Maben
I'm just wondering.. If you're specifying div width="600" and then require the table to fit 100%.. Why not put a width on the table instead of the containing div.
don't mind me, Just curious to know what specifically you're trying to achieve other than the border-collapse.
我只是想知道.. 如果您指定 div width="600" 然后要求表格适合 100%.. 为什么不在表格上放置宽度而不是包含 div。
别介意我，只是想知道除了边界折叠之外你想要实现什么。
回答by oskar
You can fix any width trouble simply by adding a short JScritp ... first add this to your BODY tag: onload="autoadjustw"; and this little script in the head tag:
您可以通过添加一个简短的 JScritp 来解决任何宽度问题……首先将其添加到您的 BODY 标签中： onload="autoadjustw"; 和 head 标签中的这个小脚本：
function autoadjustw(){
AN=document.getElementById("parent_object").offsetWidth;
document.getElementById("Table_Id").style.width=AN+"px";
}
回答by Jamie
if removing display: block breaks in IE use '\9' to target IE only like:
如果删除显示：IE 中的块中断使用 '\9' 仅针对 IE：
table
{
margin: 10px 0;
width: 100%;
display: block; /*for ie only"*/
}
回答by Robimp
You need to define the parent elements as 100% too, so the table knows what it is a percentage of.
您还需要将父元素定义为 100%，以便表格知道它的百分比。
回答by Kalle H. V?ravas
Tables do not use display: block;Simple width: 100%; should do the display: block; trick.
表格不使用 display: block; 简单宽度：100%；应该做显示：块；诡计。
Never have, never will!
从来没有，永远不会！
