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

177

¿Cómo elimino el espacio extra entre las filas y columnas de 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 juntas para que se vean como una imagen grande.

¿Cómo debo arreglar esto?

CSS

table {
  border-collapse: collapse;
}

HTML

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Tera Byte Video Game Creation Camp</title>
  <link rel="stylesheet" type="text/css" href="style.css"></link>
</head>

<body>
  <table class="mytable" align="center">
    <tr class="header">
      <td colspan="3"><img src="images/home_01.png" /></td>
    </tr>
    <tr class="top">
      <td colspan="3"><img src="images/home_02.png" /></td>
    </tr>
    <tr class="link-row">
      <td><img src="images/home_03.png" /></td>
      <td><img src="images/home_04.png" /></td>
      <td><img src="images/home_05.png" /></td>
    </tr>
    <tr class="link-row">
      <td><img src="images/home_07.png" /></td>
      <td><img src="images/home_06.png" /></td>
      <td><img src="images/home_08.png" /></td>
    </tr>
    <tr class="link-row">
      <td><img src="images/home_09.png" /></td>
      <td><img src="images/home_10.png" /></td>
      <td><img src="images/home_11.png" /></td>
    </tr>
    <tr class="link-row">
      <td><img src="images/home_12.png" /></td>
      <td><img src="images/home_13.png" /></td>
      <td><img src="images/home_14.png" /></td>
    </tr>
    <tr class="bottom">
      <td colspan="3"><img src="images/home_15.png" /></td>
    </tr>
  </table>

</body>

</html>

html css html-table Zach Galant
fuente

84

Agregue este restablecimiento 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;
}

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

vectran
fuente

15

Hay un comentario si lees diciendo: / * las tablas todavía necesitan 'cellspacing = "0"' en el marcado * /

easwee

2

¿Qué sucede si está utilizando una gran cantidad de CSS en su página y no desea restablecerlo?

Sevenearths

Probablemente sea la mejor práctica usar un reset o algún tipo de framework y construir desde allí. Sin embargo, en este caso tendrá que restablecer cada estilo, es decir. tabla {relleno: 0px; borde: 0px; colapso del borde: colapso; etc} .... Checkout quirksmode.org/css/tables.html para más información.

vectran

Puede omitir muchos de ellos, ya que es solo para las tablas.

Cai Haoyang

31

Esto es excesivo, no responde la pregunta y ni siquiera es un reinicio completo. Quizás aísle el código que sea relevante, explíquelo y luego sugiera usar un reinicio.

Sandy Gifford

198

Agregando a la respuesta de vectran: También debe establecer el cellspacingatributo en el elemento de la tabla para la compatibilidad entre navegadores.

<table cellspacing="0">

EDITAR (en aras de la integridad, estoy expandiendo esto 5 años después :):

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

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

Entonces, para hacer un restablecimiento del espaciado entre celdas de la tabla del navegador cruzado (compatible con IE6 como un 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 */
}

<p>Default table:</p>

<table>
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>

<p>Removed spacing:</p>

<table class="no-spacing" cellspacing="0"> <!-- cellspacing 0 to support IE6 and IE7 -->
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>

Expandir fragmento

easwee
fuente

68

Esto funcionó para mí:

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

tribu de la página
fuente

55

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

display: block;

Eso elimina el espacio no deseado para mí

Jacob Bertelsen
fuente

9

Solo agregando encima de la respuesta de Jacob, para imgadentro 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 la perspectiva, debe hacer dos pasos más:

table {border-collapse: collapse;}

y establece que todos los tdelementos tengan lo mismo heighty widthque contengan sus imágenes. Por ejemplo,

<td width="600" height="80" style="line-height: 80px;">
    <img height="80" src="http://www.website.com/images/Nature_01.jpg" width="600" />
</td>

hexinpeter
fuente

8

table 
{
    border-collapse: collapse;
}

colapsará todos los bordes que separan las columnas de la tabla ...

o tratar

<table cellspacing="0" style="border-spacing: 0;">

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

¡pasarlo bien!

Aamir Shahzad
fuente

1

<table cellspacing="0" border-spacing: 0;>es marcado inválido! <table cellspacing="0" style="border-spacing: 0;">sería correcto

Dirk von Grünigen

8

Para HTML5 compatible con los estándares, 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;
}

totalmente total
fuente

5

Prueba esto,

table{
border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, 
table th{
padding: 0; /* 'cellpadding' equivalent */
}

Rakesh Vadnal
fuente

4

establecer Cellpadding y cellpacing en 0 eliminará el espacio innecesario entre filas y columnas ...

Vijay
fuente

4

Todo lo que tenía que hacer era agregar:

line-height: 0px;

en mi

<tr ...>

Ángel Ramírez Isea
fuente

Hay otras respuestas que proporcionan la pregunta del OP, y se publicaron hace algún tiempo. Cuando publique una respuesta, asegúrese de agregar una nueva solución o una explicación sustancialmente mejor, especialmente al responder preguntas anteriores.

help-info.de

1

agregar esta línea al comienzo del archivo me funcionó:

<!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 de borde adecuadas no funcionó hasta que agregué la línea anterior

Albert s
fuente

¡Esto es lo ÚNICO que funcionó para mí! +1 y GRACIAS! Lo configuré como estricto en lugar de transitorio.

Scott Biggs

0

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

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

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

Seleccionar0r
fuente

quitar los TR's con un colspan no hace nada. agregar el relleno y el margen tampoco hace nada

Zach Galant

0

Tuve este problema y ninguna de las sugerencias de varias publicaciones funcionó, las probé todas. Mi problema resultó que la tabla que estaba creando está anidada en otra tabla, heredando sus propiedades. Necesitaba anular la tabla de contenedores.

En este ejemplo, SuColTable es una clase en la tabla.

.SuColTable tr {
    border: none !important;
}

.SuColTable td {
    border-spacing: 0 !important;
    border: none !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
}


.SuColTable {
    border-collapse: collapse !important;
    border: none !important;
    border-spacing: 0 !important;
    border-collapse: separate !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
// all padding would be padding: 0 !important

El colapso del borde, el borde: ninguno y el espaciado del borde eliminan la línea de tabla / fila / columna. Las llamadas de relleno 0 eliminan el relleno de la tabla de contenedores. Tuve que incluir! Important en cada estilo para que funcione, para anular los estilos de la tabla de contenedores.

Tengo padding_top, left e bottom (en lugar de solo padding) porque tengo otras dos clases que controlan padding_right.

line-height: 0px;

La altura de línea cero hace que la fila sea una línea alta. Si tiene varias líneas, se comprimen en una sola.

Jorge
fuente

-2

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 */
}

<p>Default table:</p>

<table>
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>

<p>Removed spacing:</p>

<table class="no-spacing" cellspacing="0"> <!-- cellspacing 0 to support IE6 and IE7 -->
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>

Expandir fragmento

Ikeanyi kenechukwu
fuente

Hay otras respuestas que proporcionan la pregunta del OP, y se publicaron hace algún tiempo. Cuando publique una respuesta, asegúrese de agregar una nueva solución o una explicación sustancialmente mejor, especialmente al responder preguntas anteriores.

help-info.de

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

Respuestas: