Странная проблема с коллапсом границы и границей влево / вправо

Question

У меня странная проблема с таблицей в Firefox.

То, что я хочу создать, - это создать сетку и продумать границы.

Вот макет (спасибо inkscape).

Макет 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-colllapse равно 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>

дает вам таблицу с границей 1pc между a и b и границей 3px вокруг всей таблицы.

на небольшом sidenote, если я правильно понял документы css2.1, элемент tbody может иметь ТОЛЬКО стиль границы, если для таблицы установлено значение border-collapse: collapse

Answer 2

Попробуйте применить границу 3px ко всей таблице:

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

И просто пропустите верхний / правый / нижний / левый классы.