web-dev-qa-db-fra.com

Comment supprimer les espaces indésirables entre les lignes et les colonnes d'un tableau?

Comment puis-je supprimer l'espace supplémentaire entre les lignes et les colonnes de la table.

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

Je veux que toutes les images soient côte à côte pour ressembler à une 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>
htmlcsshtml-table
163
Zach Galant

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 efficacement le CSS, en éliminant le remplissage et les marges.

78
vectran

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

<table cellspacing="0">

EDIT (par souci d’exhaustivité, j’élargis ce projet 5 ans plus tard :):

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

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

Par conséquent, afin de réinitialiser l'espacement des cellules d'un tableau à un autre (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 */
}
<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>
184
easwee

Cela a fonctionné pour moi:

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

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

display: block;

Cela supprime de l'espace indésirable pour moi

55
Jacob Bertelsen

Pour les standards HTML5, 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;
}
8
totallytotallyamazing
table 
{
    border-collapse: collapse;
}

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

ou essayer

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

faire tout espacement des cellules à 0 et espacement des bordures 0 pour atteindre le même résultat.

amusez vous!

8
Aamir Shahzad

En ajoutant simplement la réponse de Jacob, pour img 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 Outlook, vous devez effectuer deux étapes supplémentaires:

table {border-collapse: collapse;}

et définissez tous les td éléments pour qu'ils aient les mêmes height et width que les images qu'il contient. 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>
7
hexinpeter

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

4
Vijay

Essaye ça,

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

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

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 tant que je n'ai pas ajouté la ligne ci-dessus

2
Albert s

Avez-vous essayé d'enlever les TR qui ont un colspan et voyez si cela change quelque chose?

J'ai eu l'impression que colspans et rowspans étaient plutôt méchants en ce qui concerne la conception de tables précises. Si vos images semblent bien sans les colspan-TR, je commencerais par là et créerais un jeu de tables imbriqué.

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

0
Select0r