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

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

Answer 2

87

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.

vectran
la source

16

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

easwee

2

que se passe-t-il si vous utilisez beaucoup de css dans votre page et que vous ne voulez pas le réinitialiser?

Robert Johnstone

Il est probablement préférable d'utiliser une réinitialisation ou une sorte de cadre et de construire à partir de là. Cependant, dans ce cas, vous devrez réinitialiser chaque style ie. table {remplissage: 0px; bordure: 0px; border-collapse: effondrement; etc} .... Consultez quirksmode.org/css/tables.html pour en savoir plus.

vectran

Vous pouvez en sauter beaucoup car ce n'est que pour les tables.

Cai Haoyang

32

C'est excessif, ne répond pas à la question et n'est même pas une réinitialisation complète. Peut-être isolez le code pertinent, expliquez-le, puis suggérez d'utiliser une réinitialisation.

Sandy Gifford

Answer 3

16

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

easwee

Answer 4

2

que se passe-t-il si vous utilisez beaucoup de css dans votre page et que vous ne voulez pas le réinitialiser?

Robert Johnstone

Answer 5

Il est probablement préférable d'utiliser une réinitialisation ou une sorte de cadre et de construire à partir de là. Cependant, dans ce cas, vous devrez réinitialiser chaque style ie. table {remplissage: 0px; bordure: 0px; border-collapse: effondrement; etc} .... Consultez quirksmode.org/css/tables.html pour en savoir plus.

vectran

Answer 6

Vous pouvez en sauter beaucoup car ce n'est que pour les tables.

Cai Haoyang

Answer 7

32

C'est excessif, ne répond pas à la question et n'est même pas une réinitialisation complète. Peut-être isolez le code pertinent, expliquez-le, puis suggérez d'utiliser une réinitialisation.

Sandy Gifford

Answer 8

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

Answer 9

68

Cela a fonctionné pour moi:

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

Pagetribe
la source

Answer 10

56

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

display: block;

Cela supprime l'espace indésirable pour moi

Jacob Bertelsen
la source

Answer 11

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>

Answer 12

8

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!

Aamir Shahzad
la source

1

<table cellspacing="0" border-spacing: 0;>est un balisage invalide! <table cellspacing="0" style="border-spacing: 0;">serait correct

Dirk von Grünigen

Answer 13

1

<table cellspacing="0" border-spacing: 0;>est un balisage invalide! <table cellspacing="0" style="border-spacing: 0;">serait correct

Dirk von Grünigen

Answer 14

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

Answer 15

5

Essaye ça,

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

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

Rakesh Vadnal
la source

Answer 16

4

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

Vijay
la source

Answer 17

4

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

line-height: 0px;

dans mon

<tr ...>

Ángel Ramírez Isea
la source

Il y a d'autres réponses qui répondent à la question du PO, et elles ont été publiées il y a quelque temps. Lorsque vous publiez une réponse, assurez-vous d'ajouter soit une nouvelle solution, soit une explication nettement meilleure, en particulier lorsque vous répondez à des questions plus anciennes.

help-info.de

Answer 18

Il y a d'autres réponses qui répondent à la question du PO, et elles ont été publiées il y a quelque temps. Lorsque vous publiez une réponse, assurez-vous d'ajouter soit une nouvelle solution, soit une explication nettement meilleure, en particulier lorsque vous répondez à des questions plus anciennes.

help-info.de

Answer 19

1

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

Albert s
la source

C'est la SEULE chose qui a fonctionné pour moi! +1 et MERCI! Je l'avais réglé sur Strict au lieu de transitionnel.

SMBiggs

Answer 20

C'est la SEULE chose qui a fonctionné pour moi! +1 et MERCI! Je l'avais réglé sur Strict au lieu de transitionnel.

SMBiggs

Answer 21

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

Answer 22

enlever les TR avec un colspan ne fait rien. l'ajout du rembourrage et de la marge ne fait rien non plus

Zach Galant

Answer 23

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.

Answer 24

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

Answer 25

Il y a d'autres réponses qui répondent à la question du PO, et elles ont été publiées il y a quelque temps. Lorsque vous publiez une réponse, assurez-vous d'ajouter soit une nouvelle solution, soit une explication nettement meilleure, en particulier lorsque vous répondez à des questions plus anciennes.

help-info.de

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

Réponses: