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

Comment supprimer l’espace supplémentaire entre les lignes et les colonnes de la table.

J’ai essayé de modifier la marge, le remplissage et diverses propriétés de bordure sur la table et sur tr et td.

Je veux que les images soient toutes côte à côte pour ressembler à une grande image.

Comment dois-je résoudre ce problème?

CSS

table { border-collapse: collapse; } 

HTML

     Tera Byte Video Game Creation Camp    

Ajoutez ce CSS réinitialisé à votre code CSS: (d’ ici )

 /* 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, ssortingke, 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 va réinitialiser le CSS efficacement, en éliminant le remplissage et les marges.

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

 

EDIT (par souci d’exhaustivité, je suis en train de développer 5 ans plus tard :):

Internet Explorer 6 et Internet Explorer 7 nécessitaient que vous définissiez directement cellulespacing en tant qu’atsortingbut de table, sinon l’espacement ne disparaîtrait pas.

Internet Explorer 8 et les versions ultérieures ainsi que toutes les autres versions des navigateurs les plus répandus – Chrome, Firefox, Opera 4+ – prennent en charge l’ espacement des bordures des propriétés CSS.

Donc, pour effectuer une réinitialisation de l’espacement des cellules entre navigateurs (prenant en charge IE6 comme navigateur de dinosaures), 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 */ } 
 

Default table:

First cell Second cell

Removed spacing:

First cell Second cell

Cela a fonctionné pour moi:

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

Pour les images dans td, utilisez ceci pour les images:

 display: block; 

Cela supprime l’espace non désiré pour moi

 table { border-collapse: collapse; } 

va effondrer toutes les bordures séparant les colonnes de la table …

ou essayer

 

faire tout l’espacement des cellules à 0 et l’espacement des frontières 0 pour atteindre le même.

Amusez vous!

Pour les normes conformes à HTML5, ajoutez tout ce css pour supprimer tout espace entre les images dans les tableaux:

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

En ajoutant simplement la réponse de Jacob, pour img in 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 les outlook, vous devez faire deux étapes plus:

 table {border-collapse: collapse;} 

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

    

en définissant Cellpadding et cellspacing sur 0, vous supprimez l’espace inutile entre les lignes et les colonnes …

Essaye ça,

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

l’ajout de cette ligne au début du fichier a fonctionné pour moi:

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

modifier le css pour définir les propriétés de bordure appropriées ne fonctionnait pas jusqu’à ce que j’ajoute la ligne ci-dessus

Avez-vous essayé de retirer les TR qui ont un colspan et voir si cela change quelque chose?

J’ai expérimenté les colspans et rowspans 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 par là et construirais un jeu de tables nested.

De plus, votre style.css ne semble pas complet, il y a peut-être quelque chose qui ne va pas? J’aurais au moins ajouté du padding: 0; margin: 0; padding: 0; margin: 0; à la table (ou à la classe “mytable”). Assurez-vous que vos images n’ont pas d’espaces ni de bordures (par exemple, en ajoutant img { border: 0; } à votre feuille de style).