¿Cómo eliminar el espacio no deseado entre filas y columnas en la tabla?

¿Cómo elimino el espacio adicional entre las filas y columnas en la tabla?

Intenté cambiar el margen, el relleno y varias propiedades de borde en la tabla y tr y td.

Quiero que las imágenes estén todas una al lado de la otra para que parezcan una imagen grande.

¿Cómo debo solucionar esto?

CSS

table { border-collapse: collapse; } 

HTML

     Tera Byte Video Game Creation Camp    

Agregue este restablecimiento de CSS a su código CSS: ( Desde aquí )

 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } 

Se restablecerá el CSS de manera efectiva, eliminando el relleno y los márgenes.

Agregar a la respuesta de vectran: también debe establecer el atributo de cellspacing en el elemento de la tabla para la compatibilidad entre navegadores.

 

EDITAR (en aras de la exhaustividad lo ampliaré 5 años después :):

Internet Explorer 6 e Internet Explorer 7 requieren que establezca el espacio entre celdas directamente como un atributo de tabla, de lo contrario, el espaciado no se desvanecería.

Internet Explorer 8 y versiones posteriores y todas las demás versiones de navegadores populares – Chrome, Firefox, Opera 4+ – admiten el espacio entre fronteras de la propiedad CSS.

Por lo tanto, para restablecer el espacio entre celdas de la tabla entre navegadores (que admite IE6 como navegador de dinosaurios), puede seguir el siguiente ejemplo de código:

 table{ border: 1px solid black; } table td { border: 1px solid black; /* Style just to show the table cell boundaries */ } table.no-spacing { border-spacing:0; /* Removes the cell spacing via CSS */ border-collapse: collapse; /* Optional - if you don't want to have double border where cells touch */ } 
 

Default table:

First cell Second cell

Removed spacing:

First cell Second cell

Esto funcionó para mí:

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

Para imágenes en td, use esto para imágenes:

 display: block; 

Eso elimina espacio no deseado para mí

 table { border-collapse: collapse; } 

colapsará todas las fronteras que separan las columnas de la tabla …

o tratar

 

haga todo el espaciado de celdas a 0 y el espaciado de bordes 0 para lograr lo mismo.

¡pasarlo bien!

Para los estándares que cumplen con HTML5, agregue todo este CSS para eliminar todo el espacio entre las imágenes en las tablas:

 table { border-spacing: 0; border-collapse: collapse; } td { padding:0px; } td img { display:block; } 

Solo agregando encima de la respuesta de Jacob, para img en td ,

 body {line-height: 0;} img {display: block; vertical-align: bottom;} 

Esto funciona para la mayoría de los clientes de correo electrónico, incluido Gmail. Pero no Outlook. Para outlook, necesita hacer dos pasos más:

 table {border-collapse: collapse;} 

y establece que todos los elementos td tengan la misma height y width que las imágenes que contienen. Por ejemplo,

    

establecer Cellpadding y cellspacing en 0 eliminará el espacio innecesario entre filas y columnas …

Prueba esto,

 table{ border-collapse: collapse; /* 'cellspacing' equivalent */ } table td, table th{ padding: 0; /* 'cellpadding' equivalent */ } 

agregando esta línea al comienzo del archivo funcionó para mí:

 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

modificar el css para establecer las propiedades adecuadas del borde no funcionó hasta que agregué la línea anterior

¿Has intentado eliminar los TRs que tienen un colspan y ver si esto cambia algo?

He experimentado colspans y rowspans que son bastante desagradables cuando se trata de diseños de tablas precisos. Si sus imágenes se ven bien sin los colspan-TRs, comenzaría desde allí y construiría un conjunto de tablas nested.

Además, su style.css no parece estar completo, ¿tal vez hay algo mal allí? Al menos agregaría padding: 0; margin: 0; padding: 0; margin: 0; a la mesa (o a la clase “mytable”). Asegúrese de que sus imágenes no tengan espacios ni bordes (por ejemplo, agregando img { border: 0; } a su hoja de estilo).