Скрыть границу на столе, где в Firefox нет ячейки, и border-collapse: collapse; - PullRequest
Новая
       39

Скрыть границу на столе, где в Firefox нет ячейки, и border-collapse: collapse;

2 голосов
/ 27 февраля 2009

Учитывая следующую HTML-страницу, в верхней части таблицы появляется горизонтальная линия, где 1-я строка будет иметь 2-ю и 3-ю ячейку (если они были определены). 

<html>
<head>
<Title>Test Page</Title>

<style type="text/css">
table {
    margin:10px 0 10px 0;
    padding:0;
    margin: 0 0 0 0;
    border-collapse: collapse;
    border: 0;
}

td {
    border:1px solid #CCCCCC;
    padding:5px;
}
</style>

</head>
<body>
    <table>
        <tr>
            <td>Test Title</td>
        </tr>
        <tr>
            <td>Sub Title</td>
            <td>Sub Title</td>
            <td>Sub Title</td>
        </tr>
    <table>
</body>
</html>

Я бы хотел, чтобы строка (выделенная ниже) была удалена только путем изменения CSS. Эта строка появляется в Firefox, но не в IE6.

Example Image

Обратите внимание, что я не могу каким-либо образом изменить HTML-код, поскольку он генерируется сторонней системой (пример выше просто для освещения проблемы). Эта сторонняя система позволяет мне изменять только CSS.

Ответы [ 6 ]

3 голосов
/ 27 февраля 2009

При этом он будет отображаться без верхней границы в Firefox: 

table, td {
    border: 1px #CCC;
}

table {
    margin: 0;
    border-spacing: 0;
    border-style: none none solid solid;
}

* html table {
    border-collapse: collapse;
}

td {
    border-style: solid solid none none;
    padding: 5px;
}

Он также отлично работает в IE7 для меня. Если он не работает в IE6, используйте условные комментарии или CSS-хаки, чтобы вернуть его в состояние, в котором он находился в вашем собственном коде, только для IE6.

0 голосов
/ 10 апреля 2009

Вот решение этой проблемы, которое действительно работает. Я узнал об этом после ооочень долго

Проблема с тегом tbody.

Проверьте решение здесь: http://www.dashplanet.com/firefox-displaying-border-top-of-table-how-to-hide-that-1px-top-border-table

0 голосов
/ 27 февраля 2009

Является ли использование javascript вариант? Вы можете ввести неразрывный пробел в ячейку, которая должна нарисовать границу.

0 голосов
/ 27 февраля 2009

В этом случае может помочь свойство пустые ячейки . 

table {
  empty-cells:hide;
}

Опять же, может и нет. Вы также можете явно отключить границу строк таблицы?

0 голосов
/ 27 февраля 2009

РЕДАКТИРОВАТЬ: Ваш сторонний инструмент генерирует неверную / недействительную разметку, которая даст вам очень большую совместимость браузера / головную боль css, если это вообще возможно, замените ее или создайте HTML самостоятельно

Технически говоря, первый ряд должен быть помечен как 

    <tr>
        <td colspan="3">Test Title</td>
    </tr>

Так что я не думаю, что вы можете достичь этого, используя таблицы.

Подсказка css 

margin: 10px 0;

Помещает 10 пикселей сверху и снизу и 0 слева и справа

0 голосов
/ 27 февраля 2009

С Ошибка Firefox Colspan Border-COllapse :

Очевидный обходной путь - просто установить colspan перед DOM имеет завершена загрузка или, как минимум, до того, как стол закончился рендеринг. Однако для этого необходимо, чтобы мы загромождаем наш чистый HTML со встроенными тегами или предварительное знание числа столбцы на этапе генерации HTML.

надеюсь найти более элегантный «неинвазивное JavaScript» решение в будущее, но в настоящее время я не знаю ни одного. Просто настройка стиль отображения таблицы в "none" и затем сбросив его обратно на «блок» сделал не делать трюк.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...