Comment supprimer l'espace indésirable entre les lignes et les colonnes dans le tableau?

Question

Comment supprimer l'espace indésirable entre les lignes et les colonnes dans le tableau?

Comment 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 tr et td.

Je veux que toutes les images soient juste à côté de l'autre 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>

148

css html html-table

demandé sur Brian Tompsett - 汤莱恩 2010-02-17 12:06:29

11 réponses

score 74 · Answer 1

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

Il va réinitialiser le CSS efficacement, en se débarrassant du remplissage et des marges.

score 172 · Answer 2

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

<table cellspacing="0">

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

Internet Explorer 6 et Internet Explorer 7 requises ensemble cellspacing directement comme un attribut de table, sinon l'espacement de ne pas disparaître.

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

Donc, afin de faire une réinitialisation de l'espacement des cellules de la table cross-browser (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>

score 61 · Answer 3

Cela a fonctionné pour moi:

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

61

répondu pagetribe 2010-09-17 00:13:09

score 54 · Answer 4

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

display: block;

Qui supprime l'espace indésirable pour moi

score 8 · Answer 5

table 
{
    border-collapse: collapse;
}

Va réduire toutes les bordures séparant les colonnes de la table...

Ou essayez

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

Faites tout cell-spacing à 0 et border spacing 0 pour obtenir le même.

Amusez-vous!

score 7 · Answer 6

Juste en ajoutant au-dessus de 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 faire deux étapes de plus:

table {border-collapse: collapse;}

Et définissez tous les éléments td pour avoir les mêmes 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>

score 6 · Answer 7

Pour HTML5 conforme aux normes ajouter tout ce css pour supprimer tout l'espace entre les images dans les tables:

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

score 4 · Answer 8

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

score 3 · Answer 9

Essayez ceci,

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

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

score 2 · Answer 10

L'ajout de cette ligne au début du fichier s 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 n'a pas fonctionné jusqu'à ce que j'ajoute la ligne ci-dessus

score 0 · Answer 11

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

J'ai expérimenté colspans et rowspans pour être assez méchant quand il s'agit de dessins de table précis. Si vos images semblent bien sans colspan-TRs, je commencerais à partir de là et construirais un tableset imbriqué.

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

Las etiquetas más populares

Comment supprimer l'espace indésirable entre les lignes et les colonnes dans le tableau?

11 réponses