Исчезающие границы ячеек таблицы CSS в браузерах на основе Gecko - PullRequest
Новая
       11

Исчезающие границы ячеек таблицы CSS в браузерах на основе Gecko

8 голосов
/ 06 ноября 2008

У меня есть очень специфическая HTML-конструкция таблицы, которая, кажется, обнаруживает ошибку Gecko.

Вот дистиллированная версия проблемы. Обратите внимание на следующую таблицу в браузере на основе геккона (например, FF): (вам придется скопировать и вставить это в новый файл) 

<style>
table.example{
    border-collapse:collapse;
}
table.example td {
    border:1px solid red;
}
</style>
<table class="example">
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>          
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td rowspan="3">3</td>

        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td rowspan="2">2</td>      
        </tr>
        <tr>
            <td>1</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

Отсутствует строка над цифрой «3» в правой нижней ячейке - просмотрите ее в любом другом браузере, и строка отобразится, как и ожидалось. Интересно, угробите раздел thead таблицы и посмотрите, что мы получим: 

<style>
table.example{
    border-collapse:collapse;
}
table.example td {
    border:1px solid red;
}
</style>
<table class="example">
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td rowspan="3">3</td>

        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td rowspan="2">2</td>      
        </tr>
        <tr>
            <td>1</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

Это заставляет его работать. Кто-нибудь видел это? Я полагаю, что пока я просто избавлюсь от своего раздела thead в качестве обходного пути, хотя это сделает таблицу менее доступной.

Ответы [ 2 ]

5 голосов
/ 06 ноября 2008

Странно ... определенно ошибка в живописи. Если щелкнуть правой кнопкой мыши, чтобы контекстное меню появилось над частью того места, где должна быть строка, то при закрытии контекстного меню линия будет перерисована под ней.

Редактировать: Обходной путь - если вы положите style="border-color: ...;" на <td rowspan="3">, вы можете получить границу, чтобы появиться, но это должен быть другой цвет - просто используйте тот, который ближе к другим насколько это возможно. Например, если таблица # ff0000, используйте # ff0001

0 голосов
/ 25 июня 2010

Я также нашел эту ошибку, но она не на моем компьютере, а другая. Если после определенного разрешения я изменю размер окна браузера, строки исчезнут. как только я разверну окно, все всплывет. Вы можете исправить это навсегда, установив border-collapse: Отдельно; это дает каждому владельцу каждой клетки свою ширину. Это не то, что я хочу сделать, но это работает.

Это также может быть вызвано использованием border-collapse: collapse; затем установите выравнивание границ в 1px, а затем 0px. Поскольку он сжимает границы, кажется, что он имеет приоритет над 0px по ширине в 1px.

в любом случае это только firefox, и это еще одна причина отойти от него.

...