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

Рассмотрим следующий 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>

Ответы

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

Просто чтобы положить все в одном месте.

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

Это легко решить с помощью CSS, как указано пользователем2342963 (добавление фонового зажима: 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>

Ответ 4

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

td {
    position: static;
}

Ответ 5

Другим возможным решением является исправление ошибок 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 m (64-разрядный)
  • Vivaldi 1.2.490.43() (32-разрядная версия)

но с правыми границами в

  • Firefox 44.0.2
  • IE 11 (11.420.10586.0)
  • Edge 25.10586.0.0