Strange problem with border collase and border left/right.

Question

Hi all, 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).

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:

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:

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:

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:

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.

Answer 1

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.

Answer 2

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