Границы не отображаются в Firefox с краем-свертыванием в таблице, положением: относительно тела тела или цветом фона в ячейке

82

Рассмотрим следующий HTML:

<html>
<head>
    <style>
        TABLE.data TD.priceCell
        {
            background-color: #EEE;
            text-align: center;
            color: #000;
        }
    
        div.datagrid table
        {
            border-collapse: collapse;
        }
    
        div.datagrid table tbody
        {
            position: relative;
        }
    </style>
</head>
<body>
    <div id="contents" class="datagrid">
        <table class="data" id="tableHeader">
            <thead>
                <tr class="fixed-row">
                    <th>Product</th>
                    <th class="HeaderBlueWeekDay">Price</th>
                    <th class="HeaderBlueWeekDay">Discount</th>
                </tr>
            </thead>
            <tbody>
                <tr style="font-style: italic;">
                    <td>Keyboard</td>
                    <td class="priceCell">20</td>
                    <td style="border-right: #3D84FF 1px solid; border-left: #3D84FF 1px solid;" class="priceCell">2</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
Развернуть фрагмент

Обратите внимание, что последняя ячейка имеет левую и правую границу во встроенном стиле. Вы (или, по крайней мере, я) ожидали бы, что это будет видно. В IE это так. Но в Firefox (6) этого нет. Вы можете решить это следующим образом:

  • Удаление позиции относительно включения div.datagrid table tbodyв CSS
  • Переход div.datagrid table tbodyна div.datagrid tableв CSS
  • Удаление background-colorна table.data td.priceCellв CSS
  • Удаление border-collapseна div.datagrid tableв CSS

Это упрощенная версия нашего кода; мы тоже ее решили (выбрав вариант 2). Но вот что меня интересует:

  • Это ошибка Firefox?
  • Это ошибка IE?

И особенно: почему Firefox не показывает границы, когда CSS такой, какой он есть?

css firefox border Питер
источник
Не спрашивайте меня, почему, но когда я переместил border-collapseсвойство из div.datagrid tableв table.dataсамо в CSS выше, все сработало нормально. Может быть, здесь есть кто-то еще, кто может объяснить ... (я использую Firefox 5)
compostus
1
У меня нет ответа на твой вопрос. Я подозреваю, что это ошибка, поскольку относительное позиционирование не должно влиять на границы, но я сделал упрощенный тестовый пример, и все 4 браузера отображали его по-разному! (Fx6, Op 11.50, IE8, Chrome 15) Тестовый пример здесь: jsfiddle.net/76Qb7/9
Дуг
Просто столкнулся с этой проблемой ... забавно, что ошибка firefox сохраняется в течение такого промежутка времени.
GDY

Ответы:

64

Мне это кажется ошибкой Firefox. Фон закрашивает границы; Вы можете увидеть это, если используете полупрозрачный цвет фона.

Я подал https://bugzilla.mozilla.org/show_bug.cgi?id=688556

Борис Збарский
источник
2
Я столкнулся с той же проблемой. Это до сих пор не исправлено Firefox. Кажется, они не воспринимают это достаточно серьезно, хотя это большая проблема дизайна при использовании селектора: nth-child (odd), а также добавление фона только к нечетным строкам. Мне тоже нужна граница, чтобы сделать ее идеальной. Спасибо за сообщение об ошибке!
Jelmer
FYI, все еще актуально 9 лет спустя.
Charles Merriam
181

Просто столкнулся с этой проблемой и пришел к единственному решению css: просто добавьте background-clip: padding-boxв свой tdэлемент.

См. Эту статью для получения дополнительной информации: https://developer.mozilla.org/en-US/docs/CSS/background-clip

medoingthings
источник
2
Ха, я не понимаю. В документах говорится, что он указывает, распространяется ли фон под рамкой. У меня такое впечатление, что он отображается поверх границы.
Питер
2
Лучшее решение только для CSS, которое я нашел. Спасибо, что поделились @medoingthings
helpse
14

Просто собрать все в одном месте.

Проблема возникает, когда у вас есть ячейка с относительной позицией внутри таблицы со свернутыми границами (как указал Борис и заполнил ошибку https://bugzilla.mozilla.org/show_bug.cgi?id=688556 )

Это можно легко решить с помощью CSS, как указано пользователем2342963 (Добавление background-clip: padding-box в ячейку).

Вы можете увидеть проблему (с Firefox) и исправление здесь: http://jsfiddle.net/ramiro_conductiva/XgeAS/

table {border-spacing: 0px;}
td {border: 1px solid blue; background-color: yellow; padding: 5px;}
td.cellRelative {position: relative;}
td.cellRelativeFix {background-clip: padding-box;}
table.tableSeparate {border-collapse: separate;}
table.tableCollapse {border-collapse: collapse;}

<table class="tableSeparate">
    <tbody>
        <tr>
            <td class="cellRelative">position: relative</td>
            <td>position: static</td>
        </tr>
    </tbody>
</table>
<table class="tableCollapse">
    <tbody>
        <tr>
            <td class="cellRelative">position: relative</td>
            <td>position: static</td>
        </tr>
    </tbody>
</table>
<table class="tableCollapse">
    <tbody>
        <tr>
            <td class="cellRelative cellRelativeFix">position: relative</td>
            <td>position: static</td>
        </tr>
    </tbody>
</table>
Рамиро Санчес
источник
2
Это работает, чтобы исправить ошибку в FF, но в IE есть уродливая белая рамка внутри обычной границы, как мы это исправить?
Тони Брикс
9

Это ошибка в Firefox, и, надеюсь, они скоро ее исправят. Но тем временем я смог решить эту проблему, установив для своих tdячеек значение position: static. Надеюсь, это поможет кому-то другому.

td {
    position: static;
}
smitt04
источник
3
Если вы используете псевдоэлементы, такие как ::beforeили ::afterна одном и том же td, position: staticиспортите эти стили. background-clip: padding-boxбезопаснее.
Sebsemillia
3

Другое возможное решение - исправить ошибки colspan в разметке таблицы.

Очевидно, ошибки colspan могут вызывать те же эффекты со скрытыми границами при использовании border-collapse: collapse;

Я был направлен к нужному решению через http://www.codingforums.com/html-and-css/46049-border-collapse-hiding-some-outside-borders.html .

В моей таблице я написал <th colspan = "9">, когда было всего 8 столбцов.

Это вызвало ошибку (скрытая правая граница) в

  • Chrome 51.0.2704.103 м (64-разрядная версия)
  • Vivaldi 1.2.490.43 () (32-разрядная версия)

но отображается с правильными границами в

  • Firefox 44.0.2
  • IE 11 (11.420.10586.0)
  • Край 25.10586.0.0
Pekaaw
источник
1
Удаление границы-коллапса: коллапс из элемента таблицы помог нам
Ярно Аргилландер
По-видимому, это также вызывают другие синтаксические ошибки. Принимая во внимание совет @pekaaw, я вычитал свой HTML и обнаружил, что получил то, <thead>что хотел </thead>. Исправив эту опечатку, проблема с границами была устранена!
davidreedernst
1

Лучший способ решить эту проблему - сделать что-то подобное.

Обратите внимание на свойство position: relative в элементах thead и tbody, они важны. Так же, как и свойства border-collapse и background-clip. Работает с background-color для всех и чередующихся строк.

table {
  width: 100% !important;
  border-spacing: 0;
  border-collapse: unset !important;

  thead {
    position: relative;
    left: -1px;
    top: -1px;

    tr {
      th {
        background-clip: padding-box;
        border-top: 1px solid #737373!important;
        border-left: 1px solid #737373!important;
        border-right: none !important;
        border-bottom: none !important;

        &:last-child {
          border-right: 1px solid #737373!important;
        }
      }
    }
  }

  tbody {
    position: relative;
    left: -1px;
    top: -1px;

    tr {
      &:last-child {
        td {
          border-bottom: 1px solid #737373!important;
        }
      }

      td {
        background-clip: padding-box;
        border-top: 1px solid #737373!important;
        border-left: 1px solid #737373!important;
        border-right: none !important;
        border-bottom: none !important;

        &:last-child {
          border-right: 1px solid #737373!important;
        }
      }
    }
  }
}
Майк Диндер
источник
0

Добавление другого решения этой (старой) проблемы: это случилось со мной сегодня, потому что у меня довольно сложная таблица с несколькими tbody. Единственная проблема заключалась в том, что у меня был открытый тег tbody, который не был закрыт. Я удалил этот тег, и границы снова появились, без необходимости изменять что-либо в моем CSS. Чтобы уточнить, моя структура была примерно такой:

<table>
  <thead>
    <tr><th>Col1</th><th>Col2</th></tr>
  </thead>
  <tbody>
  <tbody>
    <tr><td>Val1</td><td>Val2</td></tr>
    <tr><td>Val3</td><td>Val4</td></tr>
  </tbody>
</table>
Развернуть фрагмент

Кац
источник