Pregunta ¿Error de 1 píxel de Firefox con colapso de borde, solución alternativa?


¿Hay alguna solución para el siguiente error de "1 píxel a la izquierda"?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">                                   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   
<body>
<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table style="border: 1px solid green; border-collapse: collapse; width: 100%">
    <tbody>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
        </tr>
        <tr>
            <td>Hello</td>
            <td>World</td>
        </tr>
    </tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>
</body>
</html>

Se parece a esto:

Error de Firefox CSS http://i42.tinypic.com/245x9ud.png

¿Hay alguna solución pura de CSS para esto?


Editar

No estaba claro acerca de mi mesa, así que aquí está de nuevo:

Con colapso de borde:

Error de Firefox CSS http://i42.tinypic.com/245x9ud.png

Con cellspacing = "0" y sin colapso de borde como se sugiere:

Error de Firefox CSS http://i44.tinypic.com/2rg0qxi.png

Entonces ahora las fronteras dentro de mi mesa son duplicado, pero quiero un borde 1px en mi mesa.

Cuando elimino el borde 1px de la tabla, termino con:

Error de Firefox CSS http://i40.tinypic.com/2vbokmq.png

Los bordes todavía se duplican dentro de mi mesa.

Podría establecer solo el borde derecho e inferior para cada TD, TH y borde izquierdo para cada primer hijo en TR para lograr lo que quiero, pero creo que hay una manera más simple?


34
2018-06-23 23:00


origen


Respuestas:


Elimine el colapso del borde y use cellspacing = 0 en su lugar.

<table style="border: 15px solid green; width: 100%"  cellspacing="0">

Sucede porque cuando establece border-collapse: colapso, Firefox 2.0 pone el borde en el exterior del tr. Los otros navegadores lo ponen en el interior.

Establezca el ancho de sus bordes en 10px en su código para ver lo que realmente está sucediendo.


editar después de editar OP

Puede usar el viejo truco "border" de la tabla. Establecer el color de fondo en la tabla. Establezca el color td y th en blanco. Espaciado de celdas de usuario = 1;

table {background-color: green;width:100%;}
td, th{background-color:white;}

<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table cellspacing="1" >
        <tbody>
                <tr>
                        <th>Col1</th>
                        <th>Col2</th>
                </tr>
                <tr>
                        <td>Hello</td>
                        <td>World</td>
                </tr>
        </tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>

18
2018-06-23 23:17



Para aquellos que prefieren mantener la presentación fuera del marcado, o que no tienen acceso al marcado, aquí hay una solución puramente CSS. Acabo de toparme con este problema y probé esta solución en FF3.5, IE6, IE7, IE8, Safari 4, Opera 10 y Google Chrome.

table { border-spacing: 0; *border-collapse: collapse; } 

Esto establece la tabla para usar el espacio entre los bordes en todos los navegadores (incluido el culpable, Firefox). Luego utiliza el hack de estrella CSS para presentar la regla de colapso de borde solo a IE, que no aplica correctamente el espaciado de bordes (también podría incluir una hoja de estilos separada para IE con comentarios condicionales si no le gustan los hacks).

Si prefiere usar el espaciamiento celular, utilícelo. Esto simplemente se ofrece como un método alternativo usando CSS.


22
2017-09-25 19:51



Este problema ya no existe. En Firefox 47.0.1, el siguiente CSS no muestra el problema de un píxel:

table {
  border-collapse: collapse;
}

th, td {
  border: solid 1px #000;
}

También podemos obtener bordes limpios de un píxel para que funcionen sin depender de una implementación funcional de border-collapse, Me gusta esto:

table {
  border: solid 1px #000;
  border-width: 0 1px 1px 0;
  border-spacing: 0;
}

th, td {
  border: solid 1px #000;
  border-width: 1px 0 0 1px;
}

¿Ves lo que está haciendo? El truco es que ponemos solo un borde superior e izquierdo en las celdas:

 +------+------
 | cell | cell
 +------+------
 | cell | cell

Esto deja la mesa sin un borde derecho e inferior: los estilizamos table 

+ ------ + ------- | + ------- + ------ +
| célula | célula | | célula | célula |
+ ------ + ------- + | = + ------- + ------ +
| célula | célula | | célula | célula |
| | --------- + + ------- + ------ +

los border-spacing: 0 es esencial; de lo contrario, estas líneas no se conectarán.


5
2017-07-05 06:08



table {border-spacing: 0; border-collapse: colapso; } / * funciona en FF 3.5 * /


2
2017-11-10 22:23



table { border-spacing: 0; *border-collapse: collapse; }

no funcionaba para mí en FF 31. Como tengo diferentes colores para las células thead y tbody, el truco de color de fondo de la mesa tampoco funcionaba. La única solución fue la siguiente:

table {
  border-collapse: separate;
}    
table tbody td {
  border: 1px solid #000;
  border-top: none;
  border-left: none;

  &:first-child {
    border-left: 1px solid #000;
  }
}
table thead th {
  border-bottom: 1px solid #ff0000;

  &:first-child {
    border-left: 1px solid #ff0000;
  }
  &:last-child {
    border-right: 1px solid #ff0000;
  }
}

2
2017-08-21 09:12



No creo que haya oído hablar de un "error de 1px a la izquierda", deberías subir tu código a algún lugar para que podamos verificarlo y asegurarnos de que no sea un error "me perdí algo en alguna parte" :) También sugeriría ejecutando su marcado con Firebug para determinar si hay algo más que sale mal.


0
2018-06-23 23:03



Me encontré con este problema, pero en mi caso tenía que ver con la tabla anidada dentro de un conjunto de div para desbordamiento: oculto. Lo eliminé y funcionó.


0
2018-01-15 17:37