CSS：table {width：100％; display：block;}在Firefox中不工作 [英] CSS: table {width:100%; display:block;} not working in Firefox
问题描述
我有一个html表在一个特定大小的div。我想要表应用边缘崩溃和100％宽。这里是我的代码。它渲染我想要它在IE8和在Firefox中不正确。 Firefox可能正在做规范，但无论如何。
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?
<!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。
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.
这也是对此的编辑问题，我先前发布，但它不会让我编辑的某些原因。
This is also an edit to this question 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.
推荐答案
您需要添加 table-layout：fixed 到分配给表格的样式，就是这样。
You need to add table-layout: fixed to the style assigned to the table, that's all.
这篇关于CSS：table {width：100％; display：block;}在Firefox中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
