Comment faire pour supprimer l'espace indésirable entre les lignes et les colonnes dans la table?

138

Comment supprimer l'espace supplémentaire entre les lignes et les colonnes de la table.Comment faire pour supprimer l'espace indésirable entre les lignes et les colonnes dans la table?

J'ai essayé de modifier la marge, le remplissage et diverses propriétés de bordure sur la table et tr et td. Je veux que les images soient toutes l'une à côté de l'autre pour ressembler à une grande image.

Comment résoudre ce problème?

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>

Source

2010-02-17 Zach Galant

Ajouter cette réinitialisation CSS à votre code CSS: (From here)

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

Il réinitialiserons la CSS efficacement, se débarrasser du rembourrage et des marges.

Source

2010-02-17 09:26:25 vectran

merci. ça a marché. –

+12

Il y a un commentaire si vous lisez en disant: /* les tables ont toujours besoin de 'cellspacing = "0"' dans le balisage */ – easwee

ouais, cela en faisait partie aussi. merci –

Avez-vous essayé d'enlever les TRs qui ont un colspan et voir si cela change quoi que ce soit?

J'ai déjà expérimenté les colspans et les rangepans pour être assez méchant quand il s'agit de conceptions de table précises. Si vos images semblent correctes sans les COLspan-TR, je commencerais à partir de là et construirais un jeu de tables imbriqué.

Aussi votre style.css ne semble pas être complet, peut-être y at-il un problème? J'ajouterais au moins padding: 0; margin: 0; à la table (ou à la classe "mytable"). Assurez-vous que vos images ne comportent pas d'espaces et/ou de bordures (par exemple, en ajoutant img { border: 0; } à votre feuille de style).

Source

2010-02-17 09:12:29 Select0r

en supprimant les TR avec un colspan ne fait rien. l'ajout du rembourrage et la marge ne fait rien non plus –

mise CellPadding et cellspacing à 0 supprime l'espace nécessaire entre les lignes et colonnes ...

Source

2010-02-17 09:19:11 Vijay

161

Ajout à la réponse de vectran: Vous devez également définir l'attribut cellspacing sur l'élément de table pour une compatibilité entre les navigateurs.

<table cellspacing="0">

EDIT (pour être complet j'étendre ce 5 ans plus tard :):

Internet Explorer 6 vous et Internet Explorer 7 nécessaire pour définir cellspacing directement comme attribut de table sinon l'espacement ne disparaitrait pas.

Internet Explorer 8 et versions ultérieures et toutes les autres versions de navigateurs populaires - Chrome, Firefox, Opera 4+ - prennent en charge la propriété CSS border-spacing.

Ainsi, afin de faire une remise à zéro de l'espacement des cellules de table cross-navigateur (prenant en charge IE6 comme un navigateur de dinosaure), vous pouvez suivre l'exemple de code ci-dessous:

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>

Source

2010-02-17 09:26:54 easwee

qui en a fixé une partie. merci –

merci! cela a aidé –

Cela a résolu le problème que je cherchais à résoudre, merci mon pote! :) – codepleb

Cela a fonctionné pour moi:

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

Source

2010-09-17 00:13:09 pagetribe

pour les images en td, utilisez pour des images:

display: block;

qui enlève l'espace non désiré pour moi

Source

2012-01-02 13:54:57

cela fonctionne pour moi –

Merci, fonctionne bien pour moi aussi. – monteirobrena

Essayez ceci,

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

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

Source

2012-12-27 12:26:41

table 
{ 
    border-collapse: collapse; 
}

se réduire toutes les frontières séparant les colonnes de la table ...

ou essayez

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

faire tout espacement des cellules à 0 et l'espacement des bordures 0 pour y parvenir.

amusez-vous!

Source

2013-03-20 05:55:19

' est un balisage invalide! '

' serait correct –

oui vous avez raison j'ai mis à jour la réponse ... merci –

Pour les standards HTML5 compatible ajouter tout cela css pour enlever tout l'espace entre les images dans les tableaux:

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

Source

2014-05-21 20:47:27 totallytotallyamazing

Il me manquait 'padding: 0px'. L'ajouter a fait l'affaire! – Misiu

ajoutant cette ligne au début du fichier s travaillé pour moi:

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

modification le css pour placer les propriétés appropriées de frontière n'a pas fonctionné jusqu'à ce que j'aie ajouté la ligne ci-dessus

Source

2014-11-20 17:15:28

C'est la seule chose qui a fonctionné pour moi! +1 et MERCI! Je l'ai mis à Strict au lieu de transitionnel. –

Juste ajoutant au-dessus de la réponse de Jacob, pour dans td,

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

Cela fonctionne pour la plupart des clients de messagerie, y compris Gmail. Mais pas Outlook. Pour perspectives, vous devez faire deux étapes plus:

table {border-collapse: collapse;}

et mettre tous les éléments td avoir la même height et width que ses images contenues. Par exemple,

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

Source

2015-06-26 04:37:14 hexinpeter

Questions connexes

Comment faire pour supprimer l'espace indésirable entre les lignes et les colonnes dans la table?

Répondre

Questions connexes