Strange problem with border collase and border left/right

I have some strange problem with table in Firefox.

What I want to create is to create a grid and think border.

Here is the mock up (thanks inkscape).

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

Here is my code:

<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>

The above code should give me what I want but it does not. There seems to be problem with border left and right when border-colllapse is colllapse.

The above mode get me:

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

No outer border!!!

Notice there are three lines in bold.

The problem seems to be only to left and right and NOT top and bottom.

If the three lines are:

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

I get:

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

No problem for top and bottom.

If the three lines are:

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

I get:

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

The problem seems to be isolate left and right.

If the three lines are:

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

I get:

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

Without collapse all border shows as expected.

What is going on here?

Is there a work around? a replacement for collapse?

I only target FF (internal project) so I don't really care if it work in other browser or not.

Thanks in advance.

I don't know why firefox behaves like this, but I just found an easy solution that works in firefox.

set the table to border-collapse:collapse; as before, give all the cells the usual 1px border (never mind about the left, right and so on, you won't need it), but wrap all the tr's into a tbody element and give the tbody element a the 3px border you want. works fine in ff 3.5.

Simple example:

<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>

gives you a table with a 1pc border between the a and the b, and a 3px border around the whole table.

on a little sidenote, if I understood the css2.1 documents correctly, the tbody element can ONLY have a border style, if the table is set to border-collapse:collapse

Try applying your 3px border to the entire table:

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

And just skip the top/right/bottom/left classes.