Obteniendo 1px de relleno indeseado en la tabla

Por alguna razón, obtengo un relleno o borde de 1px en una tabla. No puedo resolver cómo deshacerme de eso. He intentado agregar display:block;margin:0;padding:0; a las imágenes, pero eso no lo resuelve. También probé <table border="0"> y border:none; en el CSS. Por mi vida no puedo resolver esto.Obteniendo 1px de relleno indeseado en la tabla

La razón por la cual es un problema es porque estoy tratando de alinear las imágenes con los bordes en ambos lados de un tr, para darle bordes redondeados, ya que el radio de borde CSS3 no funciona en TR's. He agregado table, table * {border:1px solid red;} al CSS, y desde ahí, definitivamente parece un problema de relleno o margen.

La cuestión es en esta imagen:

en los lados izquierdo y derecho, se puede ver que hay algún tipo de relleno o algo entre las imágenes y el borde de la mesa. Los bordes rojos están ahí solo para ver esto.

Aquí es mi CSS:

table a { 
    color: #f7941E; 
    font-family: Arial; 
    font-size: 16px; 
    font-weight: bold; 
    /* css3 */ 
    transition: color .25s; 
    -khtml-transition: color .25s; 
    -moz-transition: color .25s; 
    -o-transition: color .25s; 
    -webkit-transition: color .25s; 
} 

    table a:hover { 
     color: #f8ae57; 
    } 

table { 
    width: 610px; 
} 

    table tr { 
     height: 33px; 
     padding: 0; 
     margin: 0; 
     vertical-align: middle; 
    } 

     table td { 
      border-collapse: collapse; 
     } 

    table tr.head { 
     color: #58585a; 
     font-family: Rockwell, serif; 
     font-size: 18px; 
     font-weight: bold; 
     text-transform: lowercase; 
    } 

    table tr.even { 
     background: #EEE; 
     height: 33px; 
    } 

     table tr td img { 
      padding: 0 15px 0 13px; 
      vertical-align: middle; 
     } 

      table tr td a img { 
       opacity: .6;     
       /* css3 */ 
       transition: opacity .25s; 
       -khtml-transition: opacity .25s; 
       -moz-transition: opacity .25s; 
       -o-transition: opacity .25s; 
       -webkit-transition: opacity .25s; 
      } 

       table tr td a img:hover { 
        opacity: 1; 
       }

Y el HTML:

<table border="0"> 
    <tr> 
     <td><img src="images/tr-left.png" style="display:block;margin:0;padding:0;"> 
     <td><img src="images/some-icon.png" /> <a href="#">Some Content</a></td> 
     <td><img src="images/tr-right.png" style="display:block;margin:0;padding:0;"> 
    </td> 
</table>

Fuente

2011-07-11 JacobTheDev

¿Ha intentado utilizar un diseño sin tablas? Los diseños de tabla están mal visto (comience argumento aquí). – Blender

¿Por qué no restablecer el margen/relleno en CSS para las tablas? – Nightfirecat

Nadie discute eso más Blender. – Phil

Probar: <table border="0" cellpadding="0" cellspacing="0">

Fuente

2011-07-11 17:32:26 prodigitalson

¡Ahh! ¡Muchas gracias! Pensé que mi restablecimiento CSS se encargó de eso, ¡pero eso lo solucionó! – JacobTheDev

Esta opción está en desuso en HTML5, pero afortunadamente puede hacer lo mismo en CSS: http://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css –

Esto pareció arreglar las cosas para mí.

CSS:

table { 
    width: 610px; 
    border-spacing:0; /* Add this here */ 
}

Fuente

2011-07-11 17:38:00 BDawg

Mi problema era un comportamiento extraño, y yo había intentado todos los trucos en el libro, pero que acolchado era terco. Finalmente descubrí que el atributo line-height establecido para el elemento body creaba el efecto de padding-top. Después de anular el cual, con una regla localizada, de

line-height: normal;

... el problema se resolvió.

Fuente

2016-08-30 08:57:27

Obteniendo 1px de relleno indeseado en la tabla

Respuesta

Cuestiones relacionadas