微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

html – CSS:table {width:100%; display:block;}无法在Firefox中运行

我有一个特定大小的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.

解决方法

你需要添加table-layout:固定到分配给表的样式,这就是全部.

原文地址:https://www.jb51.cc/html/231638.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐