Bordes no mostrados en Firefox con borde colapsado en la tabla, posición: relativa en tbody, o color de fondo en la celda

82

Considere el siguiente 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>
Expandir fragmento

Observe que la última celda tiene un borde izquierdo y uno derecho en su estilo en línea. Usted (o al menos yo) esperaría que esto fuera visible. En IE, este es el caso. Pero en Firefox (6), esto no es así. Puede resolver esto por:

  • Eliminar la posición relativa div.datagrid table tbodyen el CSS
  • Cambiar div.datagrid table tbodya div.datagrid tableen el CSS
  • Extracción del background-colorsobre table.data td.priceCellen el CSS
  • Extracción del border-collapsesobre div.datagrid tableen el CSS

Esta es una versión simplificada de nuestro código; también lo solucionamos (eligiendo la opción 2). Pero lo que me pregunto es:

  • ¿Es esto un error en Firefox?
  • ¿Es esto un error en IE?

Y especialmente: ¿cuál es la razón por la que Firefox no muestra los bordes cuando el CSS es como está?

css  firefox  border 
— Pedro
fuente
No me preguntes por qué, pero cuando moví la border-collapsepropiedad del div.datagrid tableen el table.datamismo en el CSS anterior, funcionó bien. Tal vez haya alguien más aquí que pueda explicar ... (estoy en Firefox 5)
— compostus
1
No tengo respuesta a tu pregunta. Sospecho que esto es un error, ya que el posicionamiento relativo no debería afectar los bordes, pero hice un caso de prueba simplificado y los 4 navegadores lo mostraron de manera diferente. (Fx6, Op 11.50, IE8, Chrome 15) Caso de prueba aquí: jsfiddle.net/76Qb7/9
— Doug
Me encontré con este problema ... es curioso que un error de Firefox persista durante un período de tiempo así.
— GDY

Respuestas:

64

Esto me parece un error de Firefox. Los fondos se pintan sobre los bordes; puede verlo si usa un color de fondo translúcido.

Presenté https://bugzilla.mozilla.org/show_bug.cgi?id=688556

— Boris Zbarsky
fuente
2
Corrí en el mismo problema. Aún no lo ha solucionado Firefox. Parece que no se lo toman lo suficientemente en serio, mientras que es un gran problema de diseño cuando se usa el selector: nth-child (impar) para agregar un fondo solo a las filas impares. También necesito el borde para que quede perfecto. ¡Thansk por archivar el error!
— Jelmer
Para su información, sigue vigente 9 años después.
— Charles Merriam
181

Me encontré con este problema y encontré una única solución CSS: solo agregue background-clip: padding-boxa su tdelemento.

Consulte este artículo para obtener más información: https://developer.mozilla.org/en-US/docs/CSS/background-clip

— hacer cosas
fuente
2
Eh, no lo entiendo. Los documentos dicen que especifica si el fondo se extiende por debajo del borde. Tengo la impresión de que está representado en la parte superior del borde.
— Peter
2
La mejor solución única de CSS que he encontrado. Gracias por compartir @medoingthings
— helpse
14

Solo para poner todo en un solo lugar.

El problema se produce cuando se tiene una celda con posición relativa dentro de una tabla con bordes colapsados ​​(como Boris indicó y completó el bug https://bugzilla.mozilla.org/show_bug.cgi?id=688556 )

Esto se puede resolver fácilmente usando CSS como lo indica user2342963 (Agregar background-clip: padding-box a la celda).

Puede ver el problema (con Firefox) y la solución aquí: 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>
— Ramiro Sánchez
fuente
2
Esto funciona para corregir el error en FF pero en IE hay un borde blanco feo dentro del borde regular, ¿cómo lo solucionamos?
— Tony Brix
9

Este es un error en Firefox y espero que lo solucionen pronto. Pero mientras tanto, pude solucionar este problema configurando mis tdceldas en position: static. Con suerte, eso ayudará a alguien más.

td {
    position: static;
}
— smitt04
fuente
3
Si usa pseudo-elementos como ::beforeo ::afteren el mismo td, position: staticarruina estos estilos. background-clip: padding-boxEs más seguro.
— Sebsemillia
3

Otra posible solución es corregir los errores de colspan en el marcado de su tabla.

Aparentemente, los errores de colspan pueden causar los mismos efectos con bordes ocultos cuando se usa border-collapse: collapse;

Me dirigieron a la solución correcta a través de http://www.codingforums.com/html-and-css/46049-border-collapse-hiding-some-outside-borders.html .

En mi tabla había escrito <th colspan = "9"> cuando solo había 8 columnas.

Eso provocó un error (borde derecho oculto) en

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

pero renderizado con bordes derechos en

  • Firefox 44.0.2
  • IE 11 (11.420.10586.0)
  • Borde 25.10586.0.0
— pekaaw
fuente
1
Eliminar el colapso del borde: el colapso del elemento de la tabla nos ayudó
— Jarno Argillander
Otros errores de sintaxis aparentemente también desencadenan esto. Teniendo en cuenta el consejo de @pekaaw, revisé mi HTML y descubrí que tenía lo <thead>que quería </thead>. ¡Arreglar ese error tipográfico solucionó el problema del borde!
— davidreedernst
1

La mejor manera de resolver este problema es hacer algo como esto.

Tenga en cuenta la posición: propiedad relativa en los elementos "thead" y "tbody", esos son importantes. También lo son las propiedades border-collapse y background-clip. Funciona con background-color en todas las filas y en filas alternas.

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;
        }
      }
    }
  }
}
— Mike Dinder
fuente
0

Añadiendo otra solución para este (antiguo) problema: esto me pasó hoy, porque tengo una tabla algo complicada con varios tbody. El único problema era que tenía una etiqueta tbody abierta que no estaba cerrada. Eliminé esa etiqueta y reaparecieron los bordes, sin necesidad de cambiar nada en mi CSS. Para aclarar, mi estructura era algo así como:

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

— Katz
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.