Question

我在Firefox中遇到了一些奇怪的问题。

我想要创建的是创建一个网格并思考边框。

这是模拟（感谢inkscape）。

Mockup http://dl.dropbox.com/u/1961549/StackOverflow/StrangeTableBorder/Mockup.png

这是我的代码：

<style>
.mytable { border-collapse: collapse; }

.mytd {
    width : 1.3em;

    border  : 1px solid black;
    padding : 0px;
    margin  : 0px;

    text-align : center;
}

.mytd-top    { border-top:    3px solid black; }
.mytd-bottom { border-bottom: 3px solid black; }
.mytd-left   { border-left:   3px solid black; }
.mytd-right  { border-right:  3px solid black; }
</style>

<table class="mytable">
    <tr><td class="mytd mytd-top    mytd-left">1</td><td class="mytd mytd-top"   >2</td><td class="mytd mytd-top    mytd-right">3</td></tr>
    <tr><td class="mytd             mytd-left">4</td><td class="mytd"            >5</td><td class="mytd             mytd-right">6</td></tr>
    <tr><td class="mytd mytd-bottom mytd-left">7</td><td class="mytd mytd-bottom">8</td><td class="mytd mytd-bottom mytd-right">9</td></tr>
</table>

上面的代码应该给我我想要的但却没有。 border-colllapse为colllapse时，左右边框似乎存在问题。

以上模式让我：

Img 1 http://dl.dropbox.com/u/1961549/StackOverflow/StrangeTableBorder/Img1.png

没有外边界!!!

请注意，有三行以粗体显示。

问题似乎只是左右，而不是顶部和底部。

如果三行是：

.mytable    { border-collapse: collapse; }
.mytd-left  { }
.mytd-right { }

我明白了：

Img 2 http://dl.dropbox.com/u/1961549/StackOverflow/StrangeTableBorder/Img2.png

顶部和底部没问题。

如果三行是：

.mytable    { border-collapse: collapse; }
.mytd-left  { border-left:   3px solid black; }
.mytd-right { }

我明白了：

Img 3 http://dl.dropbox.com/u/1961549/StackOverflow/StrangeTableBorder/Img3.png

问题似乎是左右孤立。

如果三行是：

.mytable    { }
.mytd-left  { border-left:   3px solid black; }
.mytd-right { border-right:  3px solid black; }

我明白了：

Img 4 http://dl.dropbox.com/u/1961549/StackOverflow/StrangeTableBorder/Img4.png

没有collapse所有边框显示符合预期。

这里发生了什么？

有解决方法吗？替换collapse？

我只针对FF（内部项目），所以我真的不在乎它是否在其他浏览器中工作。

提前致谢。

Answer 1

我不知道为什么firefox会像这样，但我刚刚发现了一个在firefox中运行的简单解决方案。

将表设置为border-collapse：collapse;像以前一样，给所有单元格提供通常的1px边框（不要介意左边，右边等等，你不需要它），但是将所有tr包装成一个tbody元素并给tbody元素一个3px边框你想。在ff 3.5中工作正常。

简单示例：

<table style="border-collapse:collapse;">
    <tbody style="border:3px solid;">
        <tr>
            <td style="border:1px solid;">a</td>
            <td style="border:1px solid;">b</td>
        </tr>
    </tbody>
</table>

为您提供a和b之间有1pc边框的表格，以及围绕整个表格的3px边框。

在一个小旁注上，如果我正确理解了css2.1文档，那么tbody元素只能有边框样式，如果表格设置为border-collapse：collapse

Answer 2

尝试将3px边框应用于整个表：

.mytable { border-collapse: collapse; border: 3px solid black;}
.mytd {  ... }

然后跳过上/右/下/左班。

边界崩溃和边界左/右的奇怪问题

2 个答案: