gpt4 book ai didi

html - CSS: 表格 {宽度:100%;显示: block ;}在 Firefox 中不工作

转载 作者:技术小花猫 更新时间:2023-10-29 12:44:17 26 4
gpt4 key购买 nike

我在特定大小的 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 来让 margin collapsing 在 Firefox 中工作。如果删除显示: block ,您应该注意到 <p> 之间的间距标签从 10px 加宽到 20px。

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

最佳答案

你需要在分配给表格的样式中添加table-layout: fixed,仅此而已。

关于html - CSS: 表格 {宽度:100%;显示: block ;}在 Firefox 中不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3809804/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com