Pas d'espacement avant le premier article et après le dernier article
J'ai un faux tableau. J'utilise la frontière de l'espacement de propriété pour créer un espace entre eux. Mais cela crée aussi un espacement avant première cellule, puis, après la dernière cellule.
Je tiens à créer un espace entre les deux colonnes.
HTML:
<div class="table">
<div class="cell"></div>
<div class="cell"></div>
</div>
CSS:
.table {
display: table;
width: 100%;
border-spacing: 11px 0;
border: 1px solid #222;
}
.cell {
display: table-cell;
width: 50%;
height: 20px;
border: 1px solid #999;
background: #ccc;
}
JSFiddle: http://jsfiddle.net/ACH2Q/
source d'informationauteur Ragnis
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser la frontière de l'espacement de la propriété à ajouter un espacement de toutes les cellules d'un tableau. Ensuite, l'utilisation de la marge gauche et la marge de droite pour supprimer la bordure extérieure de l'espacement de la mère.
Le seul inconvénient est que vous avez besoin de l'appoint div imbriqués, car la table a besoin d'une largeur de 100% et de la marge de droite ne fonctionne pas.
Si vous regardez la spec pour les tableaux en CSS, vous verrez que la
border-spacing
s'applique de manière uniforme, en ajoutant par exemple une marge de votretable-cell
éléments est ignoré.Il semble donc y avoir aucune solution propre à votre problème à l'aide de
div
s avecdisplay: table
sauf pour les très sale hacks (j'ai trouvé ce un à l'aide de "spacer " divs").Mais si c'est OK pour vous d'utiliser un "vrai" tableau au lieu de cela, vous pouvez utiliser une solution que je trouve tout à fait acceptable. Voir ce jsFiddle mise à jour de votre original.
Le balisage (j'ai ajouté une colonne):
L'idée est de rendre intérieure
td
sdiplay:inline-block
ce qui les rend sensibles aux marges de nouveau. Ensuite, vous appliquez un sélecteur CSS règletd + td
qui sélectionne tous lestd
s mais la première. Appliquer unemargin-left
de ces éléments afin d'obtenir votre "intérieur espacement". Enfin, vous avez àfloat:right
la dernière colonne pour le faire ajouter à la table de droite frontière.