[resolu] L'espacement en display: table-cell

Bonjour,

J'ai positionné des colonnes de même hauteur grâce à table-cell, mais j'aimerais bien les espacer puisque ce sont des blocs dans la page. Cependant, la valeur margin n'est plus prise en compte lorsqu'on passe en display: table-cell.

Évidemment, il y aurait des techniques comme utiliser un padding et y mettre un div à l'intérieur, etc, etc.

En attendant, je leur ai donné une valeur de border de la même couleur que le fond (ça aurait sûrement fonctionné avec transparent comme valeur de couleur) ce qui imite une marge. Mais il doit bien y avoir une solution plus intéressante... (surtout si on prévoit mettre de vrai bordure à nos blocs !)
Modifié par Vaxilart (14 Jun 2011 - 00:55)

peut-être regarder du côté des propriétés css pour les cellules ?
vu qu'en mettant display:table-cell tu transformes tes blocs en cellules de tableau => propriétés des tableau et cellules

J'avais testé, mais ça ne marchait pas. Cela dit ce soir j'ai pu y arriver.

En fait, il faut entièrement recréé un tableau (avec table, table-row, et table-cell) pour être en mesure de spécifier l'espacement en ajoutant les propriétés CSS:

div{
  display: table;
  border-collapse: separate;
  border-spacing: 10px;
}

Sur l'élément jouant le rôle du tableau directement. Ce qui m'a forcé à rajouter un <div>; ça fait pas mal de balise, mais j'imagine que c'est la seule solution.
Modifié par Vaxilart (14 Jun 2011 - 00:53)

Bonjour,

comme pour un élément td/th, il faut jouer avec le padding de chaque élément ayant le rendu d'une cellule.
Si tu t'en sers déjà dans ton design pour autre chose, il y a effectivement la solution de rajouter un conteneur en display: table; puis je pensais à table-layout: fixed; pour avoir un contrôle total des largeurs des blocs (j'ai pas testé si c'est le cas par défaut ou pas) et styler le contenu de chacun. Bonne idée d'utiliser border-collapse, il faut revenir aux fondamentaux des CSS

Sinon dans chaque cellule un div ou span permet de faire ce que tu veux (que la cellule soit un td/th ou un autre élément en display: table-cell;). Je m'en sers pour positionner "une cellule" en absolu ; c'est le seul moyen de mater IE7- pour un vrai tableau

Bon eh bien merci à vous !

Donc, pas de solution sans balises supplémentaires