L'espace blanc supplémentaire sur les cellules d'un tableau

L'espace blanc supplémentaire sur les cellules d'un tableau

Je suis entrain de créer un tableau avec 5 images à travers, un dans chaque cellule.
Je veux qu'elle span 920px, avec 10px écart entre chaque cellule.
Qui est égal à 176 pour chaque cellule, j'ai donc fait mes images 176px de large.

C'est mon code html et CSS:

    <table>
    <tr>
        <td><a class="fancybox-effects-c" rel="group" href="images/newhomes_02.jpeg" title="New Home Number Two"><img src="images/thumb_newhomes_01.gif" class="fade" alt="" /></a></td>
        <td><a class="fancybox-effects-c" rel="group" href="images/newhomes_02.jpeg" title="New Home Number Two"><img src="images/thumb_newhomes_01.gif" class="fade" alt="" /></a></td>
        <td><a class="fancybox-effects-c" rel="group" href="images/newhomes_01.jpeg" title="New Home Number Three"><img src="images/thumb_newhomes_01.gif" class="fade" alt="" /></a></td>
        <td><a class="fancybox-effects-c" rel="group" href="images/newhomes_02.jpeg" title="New Home Number Four"><img src="images/thumb_newhomes_01.gif" class="fade" alt="" /></a></td>
        <td><a class="fancybox-effects-c" rel="group" href="images/newhomes_01.jpeg" title="New Home Number Five"><img src="images/thumb_newhomes_01.gif" class="fade" alt="" /></a></td>
</table>



table {
    width:100%;
    cell-padding:"0";
    cell-spacing:"0";
    margin:0;
    border:none;
}

td {
    width:176px;
}

Vous pouvez le voir dans mon image jointe. qu'il y a un espace blanc sur le côté droit à l'intérieur de chaque cellule.
Je pensais que la cellule de rembourrage et de la cellule de l'espacement de le guérir, mais il n'a pas. Même en faisant td un ensemble witdth de 176px n'a pas fonctionné. Ce que je fais mal? Est-il une meilleure méthode?

OriginalL'auteur Adam G | 2013-04-12

  1. 3

    Vous devez définir les valeurs pour le rembourrage, la marge et de la frontière de manière explicite. Regardez le code corrigé ci-dessous:

    <!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
table {
width: 100%;
padding: 0;
margin: 0;
border: 0;
border-collapse: collapse;
}
td {
width: 176px;
padding: 0 10px 0 0;
margin: 0;
border: 0;
}
td.last {
padding: 0;
margin: 0;
border: 0;
}
</style>
</head>
<body>
<div id="imageContainer" style="width: 920px; margin: 0; padding: 0; border: 0;">
<table>
<tr>
<td>
<a class="fancybox-effects-c" rel="group" href="#" title="New Home Number Two"
><img src="testImage176.jpg" class="fade" alt=""
/></a>
</td>
<td>
<a class="fancybox-effects-c" rel="group" href="#" title="New Home Number Two"
><img src="testImage176.jpg" class="fade" alt=""
/></a>
</td>
<td>
<a class="fancybox-effects-c" rel="group" href="#" title="New Home Number Three"
><img src="testImage176.jpg" class="fade" alt=""
/></a>
</td>
<td>
<a class="fancybox-effects-c" rel="group" href="#" title="New Home Number Four"
><img src="testImage176.jpg" class="fade" alt=""
/></a>
</td>
<td class="last">
<a class="fancybox-effects-c" rel="group" href="#" title="New Home Number Five"
><img src="testImage176.jpg" class="fade" alt=""
/></a>
</td>
</tr>
</table>
</div>
</body>
</html>
    Alors pourquoi ce travail - Cochée que la réponse, aucune explication quant à pourquoi?
    Parce que les cellules du tableau (td) sont explicitement attribuées rembourrage, de la marge et de la frontière.
    Je suis au courant, c'était plus un prod pour vous de mettre à jour votre réponse pour expliquer le présent, plutôt que de simplement faire de quelqu'un elses travail pour eux, mais discrètement

    OriginalL'auteur Michael Besteck

  2. 3

    Vous avez besoin cellpadding et cellspacing dans la balise table

    <table cellpadding="0" cellspacing="0">

    DÉMO

    Cheers copain! Une autre des questions à résoudre mon problème d'espacer uniformément les images. Il y a encore un supplément de quelques pixels sur la droite img. Je pense que c'est parce que j'ai besoin img 4 et img à 5 pour être en alignement droit. Alors peut-être le moyen img (img3) à l'alignement de centre. Cela fait-il sens? Est-il un moyen facile de résoudre ce problème? Désolé!!!
    Je ne suis pas en mesure de voir les espaces entre les images coz nous n'avons pas le lien de l'image ou de la largeur de l'image. Fournir du lien de l'image ou de la dimension
    Juste pour remarque, à la fois cellspacing et cellpadding sont obsolètes, HTML5.
    postimg.org/image/85jzezwdf - <-- ici est une image. le gris clair sont les images. le gris foncé est la table du fond.

    OriginalL'auteur Sowmya

  3. 1

    cell-spacing et cell-padding n'existent pas dans le CSS.

    Pour ce que vous essayez d'atteindre, vous pouvez utiliser:

    border-spacing: 10px;

    Voici une démo: http://jsfiddle.net/Town/7Gkxr/

    et

    padding: 0 //applied to your td elements, gives you the equivalent of cellpadding="0"

    Il y a une question existante sur ce sujet: Ensemble cellpadding et cellspacing en CSS?

    Aussi, comme votre table contient des images, je voudrais supprimer les paramètres de largeur pour table et td, que la table sera aussi large que la somme des images de toute façon.

    Ouais mais j'ai besoin de l'espacement entre mes images. Je veux que l'image de gauche à droite contre le mur de gauche. et l'image de droite de droite contre le mur de droite. Avec 10x espacement entre chaque img
    Ah, excuses - je l'ai mis à jour pour utiliser les border-spacing à la place.

    OriginalL'auteur Town