web-dev-qa-db-fra.com

Bordures non affichées dans Firefox avec border-collapse sur le tableau, position: relative sur le corps ou couleur d'arrière-plan sur la cellule

Considérez le code HTML suivant:

<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>

Notez que la dernière cellule a une bordure gauche et une bordure droite dans son style en ligne. Vous (ou du moins moi) vous attendriez à ce que cela soit visible. Dans IE, c'est le cas. Mais dans Firefox (6), ce n'est pas le cas. Vous pouvez résoudre ce problème en:

  • Suppression de la position relative sur div.datagrid table tbody dans le CSS
  • En changeant div.datagrid table tbody à div.datagrid table dans le CSS
  • Suppression du background-color sur table.data td.priceCell dans le CSS
  • Suppression du border-collapse sur div.datagrid table dans le CSS

Il s'agit d'une version simplifiée de notre code; nous l'avons également résolu (en choisissant l'option 2). Mais ce que je me demande, c'est:

  • Est-ce un bug dans Firefox?
  • Est-ce un bug dans IE?

Et surtout: quelle est la raison pour laquelle Firefox ne montrerait pas les frontières lorsque le CSS est tel qu'il est?

cssfirefoxborder
71
Peter

Cela ressemble à un bug de Firefox pour moi. Les arrière-plans peignent au-dessus des frontières; vous pouvez le voir si vous utilisez une couleur d'arrière-plan translucide.

J'ai déposé https://bugzilla.mozilla.org/show_bug.cgi?id=688556

58
Boris Zbarsky

Je suis juste tombé sur ce problème et j'ai trouvé une solution CSS uniquement: ajoutez simplement background-clip: padding-box à votre élément td.

Voir cet article pour plus d'informations: https://developer.mozilla.org/en-US/docs/CSS/background-clip

156
medoingthings

Juste pour mettre tout en un seul endroit.

Le problème se produit lorsque vous avez une cellule avec une position relative à l'intérieur d'un tableau avec des bordures réduites (comme Boris l'a indiqué et rempli le bogue https://bugzilla.mozilla.org/show_bug.cgi?id=688556 =)

Cela peut être facilement résolu en utilisant CSS comme indiqué par user2342963 (Ajout d'un clip d'arrière-plan: padding-box à la cellule).

Vous pouvez voir le problème (avec Firefox) et le correctif ici: 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>
12
Ramiro Sánchez

Il s'agit d'un bug dans Firefox et j'espère qu'ils le corrigeront bientôt. Mais en attendant, j'ai pu résoudre ce problème pour moi en définissant mes cellules td sur position: static. J'espère que cela aidera quelqu'un d'autre.

td {
    position: static;
}
8
smitt04

Une autre solution possible consiste à corriger les erreurs de colspan dans le balisage de votre table.

Apparemment, les erreurs de colspan peuvent provoquer les mêmes effets avec les bordures cachées lors de l'utilisation de border-collapse: collapse;

J'ai été dirigé vers la bonne solution via http://www.codingforums.com/html-and-css/46049-border-collapse-hiding-some-outside-borders.html .

Dans mon tableau, j'avais écrit <th colspan = "9"> alors qu'il n'y avait que 8 colonnes.

Cela a provoqué une erreur (bordure droite cachée) dans

  • Chrome 51.0.2704.103 m (64 bits)
  • Vivaldi 1.2.490.43 () (32 bits)

mais rendu avec des bordures droites

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