邊境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 { ... } 

，只不過跳過頂/右/下/左班。