html - 边框折叠和边框左/右的奇怪问题

Question

我在 Firefox 中遇到一些关于表格的奇怪问题。

我想创建的是创建一个网格和思考边界。

这是模型(感谢 inkscape)。

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

这是我的代码:

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

.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; }
<b>.mytd-left   { border-left:   3px solid black; }</b>
<b>.mytd-right  { border-right:  3px solid black; }</b>
</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-collapse 为 colllapse 时，左右边框似乎有问题。

上面的模式让我明白了:

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

没有外边框!!!

---

注意三行粗体。

问题似乎只是左右而不是上下。

如果三行是:

<b>.mytable    { border-collapse: collapse; }</b>
<b>.mytd-left  { }</b>
<b>.mytd-right { }</b>

我得到:

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

顶部和底部没问题。

---

如果三行是:

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

我得到:

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

问题似乎是左右孤立的。

---

如果三行是:

<b>.mytable    { }</b>
<b>.mytd-left  { border-left:   3px solid black; }</b>
<b>.mytd-right { border-right:  3px solid black; }</b>

我得到:

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 文档，如果表格设置为 border-collapse:collapse，tbody 元素只能有边框样式