边境collase和边境奇怪问题左/右

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

没有外边框！

---

请注意有三行粗体。

的问题似乎只能左，右和NOT顶部和底部。

如果三条线分别是：

.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的边框想。在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> 

给你一个表具有一个与B，而整表周围的3px边界之间的边界1PC。

一个小旁注

，如果我理解正确的CSS2.1文件，tbody元素只能有一个边框样式，如果表被设置为边界崩溃：崩溃

Answer 2

尝试将您的3px边界到整个表：

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

，只不过跳过顶/右/下/左班。