Espacement des cellules de table avec CSS

Est-il possible d'ajouter un espacement entre les cellules?Espacement des cellules de table avec CSS

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>test</title> 
    <style> 
    #wrap { 
    display: table-row; 
    /* there is no also cellspacing in CSS afaik :(*/ 
    } 
    #wrap div { 
    display: table-cell; 
    /* margin: 40px; doesn't work for table-cell :(*/ 
    /* border: 30px solid transparent; works but it's as good as adding padding */ 
    /* border: 30px solid white; works but the page background is invisible */ 

    /* decoration: */ 
    background-color: green; 
    padding: 20px; 
    } 
    </style> 
</head> 
<body> 
    <!-- don't touch the markup --> 
    <div id="wrap"> 
    <div>text1</div> 
    <div>text2</div> 
    </div> 
</body> 
</html>

Source

2010-03-26 antpaw

duplication possible de [Comment définir cellpadding et cellspacing en CSS?] (Http://stackoverflow.com/questions/339923/how-to-set-cellpadding-and-cellspacing-in-css) – user

Utilisation margin propriété:

#wrap div { 
background-color:green; 
float:left; 
margin:10px; 
padding:20px; 
}

Si cela est exactement ce que vous voulez atteindre, s'il vous plaît laissez-moi savoir afin que je puisse aider.

Edit: Une autre approche consiste à faire:

#wrap { 
border-spacing:20px; 
display:inline-table; 
}

mais notez que l'espacement des frontières n'est pas entièrement compatible avec tous les navigateurs (IE6 & IE7 ne le supporte pas).

Source

2010-03-26 09:28:02 o15a3d4l11s2

J'ai aimé votre La première solution avec "l'espacement des frontières" est meilleure parce que le flotteur me conduira dans l'enfer clair. dommage qu'il n'y ait pas de marge "border-spacing-left" – antpaw

ne fonctionne pas sur les éléments affichés en tant que cellule de table. Dans le cas où l'utilisateur souhaite construire une rangée variable de N éléments qui remplissent automatiquement l'espace qui leur est donné, vous avez besoin de table-cellule jusqu'à ce qu'une nouvelle fonctionnalité CSS soit largement prise en charge. Dans ce cas, seule votre seconde réponse s'applique, et ce serait bien si vous pouviez clarifier cela. – Brent

Espacement des cellules de table avec CSS

Répondre

Questions connexes