web-dev-qa-db-fra.com

Supprimer l'espacement entre les cellules et les lignes du tableau

Je conçois un modèle de courrier électronique HTML, qui me force à utiliser des tableaux . Dans le code ci-dessous, j'ai des problèmes (1) à supprimer l'espacement sous l'image de marque de réservation et (2) à supprimer l'espace entre l'image et la légende. Voici une capture d'écran de son apparence dans Chrome 15 sous OS X 10.6.8: 

enter image description here

<!DOCTYPE HTML>
<html>
<head>
    <title>Email Template</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
    <table style="border: 1px solid #b50b32; margin: 30px auto; width: 600px; padding: 0; border-spacing: none;" cellspacing="0" cellpadding="0">
        <tr>
            <td id="main" style="background-color: #f2f2f2;">
                <h2 style="color: #b50b32; font-family: 'Lucida Grande', Arial, sans-serif; font-size: 22px; font-weight: normal; padding: 15px; margin: 25px 0; background-color: #fff;">Major headline goes here</h2>
                <table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px;">
                    <tr><td style="padding: 0; border: 1px solid red;"><img src="placeholder.jpg" width="180" height="130" style="border: none; margin: 0; padding: 0;" alt="Placeholder" /></td></tr>
                    <tr><td style="padding: 0; border: 1px solid red;"><p class="image-caption" style="background-color: #bebebe; color: #333; font-family: 'Lucida Grande', Arial, sans-serif; margin: 0; padding: 5px;">Caption.</p></td></tr>
                </table><!--/.main-story-image-->
                <p style="margin: 0 50px 25px 25px;">Lorem ipsum dolor sit amet.</p>
                <p><a href="">Click here to read more </a></p>
                <div style="clear: both;"></div>
            </td><!--/#main-->
        </tr>
    </table>
</body>
</html>

Les bordures rouges ne sont là que pour montrer les contours des cellules. Je ne les veux pas dans la version finale.

csshtml-tablehtml-email
43
Joe Mornin

Il semble que DOCTYPE provoque l'affichage de l'image en tant qu'élément en ligne. Si j'ajoute display: block à l'image, le problème est résolu.

59
Joe Mornin

Ajoutez border-collapse: collapse dans la valeur d'attribut style de l'élément inner table. Vous pouvez également ajouter l'attribut cellspacing=0 ici, mais vous auriez alors une double bordure entre les cellules.

C'est à dire.:

<table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px; border-collapse: collapse">
48
Jukka K. Korpela

Vous avez cellspacing="0" deux fois, essayez de remplacer le second par cellpadding="0" à la place.

8
jezza-tan

Rien n'a fonctionné. La solution au problème est.

<style>
table td {
    padding: 0;
}
</style>
4
drupal

Utilisé font-size:0 dans parent TD qui a l'image.

4
Satish Upadhyay

J'avais un problème similaire. Cela m'aide à travers les principaux clients de messagerie . Ajouter:

  • attributs cellpadding="0", cellspacing="0" et border="0" aux tables
  • style border-collapse: collapse; aux tables
  • styles padding: 0; margin: 0; à chaque élément
  • et styles font-size: 0px; line-height: 0px; à chaque élément qui est vide
3
Petr Hladík

J'ai eu un problème similaire et je l'ai résolu par (en ligne) coiffant l'élément td comme suit: 

<td style="display: block;">

Cela fonctionne bien que son pas la meilleure pratique. Dans mon cas, je travaillais sur un ancien modèle qui avait été de style en utilisant des tables HTML. 

2
NJENGAH

Mettez display:block sur le css de la cellule et valign="top" qui devrait faire l'affaire

1
user2115923

Salut comme mentionné faire cellpadding = 0 @ Andrew, vous pourriez encore avoir un peu d'espace que vous utilisez table border=1.

1
Vijay Kumar

Si la zone de légende est grise, vous pouvez alors envelopper l'image et la légende dans un div ayant la même couleur d'arrière-plan que gris --- donc une balise "div" avant la balise "tr" au lieu d'être blanche, elle sera grise et ressemblera à une partie de la légende grise.

0
amhp