Est-il possible de simuler l'espacement entre les cellules de la table de sorte que l'espacement vertical et horizontal sont différents?

Question

En CSS, vous pouvez spécifier l'espacement entre les cellules du tableau en utilisant la propriété border-spacing d'une table. Cependant, cela entraîne un espacement uniforme entre les colonnes et les lignes, et je trouve plus de situations où les conceptions que j'utilise exigent des espaces entre les rangées, mais pas les colonnes, ou vice versa.

Si j'ai un fond uni, je peux simuler l'espacement en utilisant des bordures de la même couleur que la couleur de fond.

Je pourrais aussi faire un div (par exemple) le premier enfant de chaque cellule de table, et utiliser soit le remplissage ou les marges pour obtenir les résultats souhaités, mais c'est beaucoup de balisage supplémentaire juste pour s'adapter au style. Étant donné que les données que j'affiche sont des données tabulaires, existe-t-il un moyen sensé de réaliser ce style en utilisant des tables?

Answer 1

Vous pouvez spécifier différents espacements pour les bords horizontaux et verticaux pour border-spacing ou des propriétés connexes. Juste spécifier plus d'une mesure. par exemple,

border-spacing: 1px 2px; 

Answer 2

Dans le cas général où vous pouvez spécifier calues ​​thayt peuvent être appliqués globalement ou individuellement sur une propriété (par exemple, « padding »), suivre un modèle simple.

• Si vous spécifiez une valeur unique (par exemple padding: 2px;) la valeur est appliquée vers le haut, en bas, à gauche et à droite de l'objet.

• Si vous indiquez deux valeurs (par exemple padding: 2px 7px;) la première valeur est appliquée sur le haut et le bas et la seconde à la gauche et à droite.

• Si vous spécifiez trois valeurs, la première valeur est appliquée à la partie supérieure, la deuxième valeur à gauche et droite, et la valeur finale au fond .

• Si vous spécifiez quatre valeurs (par exemple padding: 1px, 2px, 3PX, 4px;) les valeurs sont appliquées en haut, à droite, en bas , à gauche dans cet ordre (rappelez-vous l'ordre en utilisant le mot Troublé) .