Comment supprimer l'espace indésirable entre les lignes et les colonnes d'un tableau?

Question 1

Comment supprimer l'espace supplémentaire entre les lignes et les colonnes du tableau.

J'ai essayé de changer 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 côte à côte pour ressembler à une seule grande image.

Comment dois-je 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>

Question 2

Ajoutez cette réinitialisation CSS à votre code CSS: ( À partir 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, 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;
}

Cela réinitialisera le CSS efficacement, en éliminant le remplissage et les marges.

Question 3

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

<table cellspacing="0">

EDIT (par souci d'exhaustivité, je développe cela 5 ans plus tard :):

Internet Explorer 6 et Internet Explorer 7 vous obligeaient à définir l' espacement des cellules directement comme attribut de table, sinon l'espacement ne disparaîtrait pas.

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

Ainsi, pour réinitialiser l'espacement des cellules du tableau entre les navigateurs (prenant en charge IE6 en tant que 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 */
}

<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>

Développer l'extrait

Question 4

Cela a fonctionné pour moi:

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

Question 5

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

display: block;

Cela supprime l'espace indésirable pour moi

Question 6

Juste en ajoutant la réponse de Jacob, car imgdans 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 Outlook, vous devez faire deux étapes supplémentaires:

table {border-collapse: collapse;}

et mettre tous les tdéléments à la même heightet widthque 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>

Question 7

table 
{
    border-collapse: collapse;
}

réduira toutes les bordures séparant les colonnes du tableau ...

ou essayez

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

faites tout l'espacement des cellules à 0 et l'espacement des bordures à 0 pour obtenir la même chose.

Amusez vous!

Question 8

Pour le HTML5 conforme aux normes, ajoutez tout ce css pour supprimer tout l'espace entre les images dans les tableaux:

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

Question 9

Essaye ça,

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

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

Question 10

définir Cellpadding et cellspacing sur 0 supprimera l'espace inutile entre les lignes et les colonnes ...

Question 11

Tout ce que j'avais à faire était d'ajouter:

line-height: 0px;

dans mon

<tr ...>

Question 12

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">

la modification du css pour définir les propriétés de bordure appropriées ne fonctionnait pas jusqu'à ce que j'aie ajouté la ligne ci-dessus

Question 13

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

J'ai vu des colspans et des rowspans assez désagréables en ce qui concerne les conceptions de table précises. Si vos images semblent correctes sans les colspan-TR, je commencerais à partir de là et créerais un ensemble de tables imbriqué.

De plus, votre style.css ne semble pas complet, peut-être qu'il y a quelque chose qui ne va pas? J'ajouterais au moins padding: 0; margin: 0;à la table (ou à la classe "mytable"). Assurez-vous que vos images n'ont pas non plus d'espaces et / ou de bordures (par exemple en les ajoutant img { border: 0; }à votre feuille de style).

Question 14

J'ai eu ce problème et aucune des suggestions de plusieurs articles n'a fonctionné, je les ai toutes essayées. Mon problème s'est avéré que la table que je créais est imbriquée dans une autre table, héritant de ses propriétés. J'avais besoin de remplacer la table des conteneurs.

Dans cet exemple, SuColTable est une classe sur la table.

.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

Le border-collapse, border: none et border-spacing suppriment la ligne de tableau / ligne / colonne. Les appels de remplissage 0 suppriment le remplissage de la table conteneur. J'ai dû inclure! Important sur chaque style pour que cela fonctionne, afin de remplacer les styles de table de conteneur.

J'ai padding_top, left et bottom (au lieu de seulement padding) car j'ai deux autres classes qui contrôlent le padding_right.

line-height: 0px;

La hauteur de ligne zéro rend la ligne une ligne haute. Si vous avez plusieurs lignes, elles sont compressées en une seule ligne.

Question 15

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>

Développer l'extrait