CSS Cell Margin

Dans mon document HTML, j’ai un tableau avec deux colonnes et plusieurs lignes. Comment puis-je augmenter l’espace entre la première et la deuxième colonne avec css? J’ai essayé d’appliquer “margin-right: 10px;” à chacune des cellules du côté gauche, mais sans effet.

Appliquez ceci à votre premier

:

 padding-right:10px; 

Exemple HTML:

 
data more data

Un mot d’avertissement: bien que padding-right puisse résoudre votre problème (visuel) particulier, ce n’est pas la bonne manière d’append l’espacement entre les cellules de tableau. Ce que le padding-right fait pour une cellule est similaire à ce qu’il fait pour la plupart des autres éléments: il ajoute de l’espace dans la cellule. Si les cellules n’ont pas de couleur de bordure, d’arrière-plan ou d’autre chose, cela peut simuler l’effet de définir l’espace entre les cellules, mais pas autrement.

Comme quelqu’un l’a noté, les spécifications de marge sont ignorées pour les cellules de tableau:

Spécification CSS 2.1 – Tableaux – Présentation visuelle du contenu de la table

Les éléments de tableau internes génèrent des boîtes rectangulars avec contenu et bordures. Les cellules ont aussi un rembourrage. Les éléments de la table interne n’ont pas de marges.

Quelle est la “bonne” façon alors? Si vous cherchez à remplacer l’atsortingbut cellspacing de la table, l’ border-spacing border-collapse (avec border-collapse désactivé) est un remplacement. Cependant, si des “marges” par cellule sont requirejses, je ne suis pas sûr de savoir comment cela peut être correctement réalisé en utilisant CSS. Le seul hack auquel je peux penser est d’utiliser le padding comme ci-dessus, d’éviter tout style des cellules (couleurs d’arrière-plan, bordures, etc.) et d’utiliser plutôt des DIV de conteneur à l’intérieur des cellules pour implémenter ce style.

Je ne suis pas un expert en CSS, alors je pourrais bien me tromper dans ce qui précède (ce qui serait bien de savoir! Je voudrais aussi une solution CSS de marge de cellules de table).

À votre santé!

Si vous ne pouvez pas utiliser de remplissage (par exemple, vous avez des bordures dans td), essayez ceci

 table { border-collapse: separate; border-spacing: 2px; } 

Je me rends compte que c’est assez tardif, mais pour le compte rendu, vous pouvez aussi utiliser les sélecteurs CSS pour cela (éliminant le besoin de styles en ligne). Ce CSS applique un remplissage à la première colonne de chaque ligne:

 table > tr > td:first-child { padding-right:10px } 

Et ce serait votre HTML, sans CSS !:

 
datamore data

Cela permet un balisage beaucoup plus élégant, en particulier dans les cas où vous devez effectuer un formatage spécifique avec CSS.

La marge ne fonctionne malheureusement pas sur les cellules individuelles, mais vous pouvez append des colonnes supplémentaires entre les deux cellules que vous souhaitez placer entre elles. Une autre option consiste à utiliser une bordure de la même couleur que le fond …

Vous pouvez simplement faire cela:

  
one two

Aucun CSS n’est requirejs 🙂 Ce 10px est votre espace.

Essayez le padding-right . Vous n’êtes pas autorisé à mettre des margin entre les cellules.

 
one two

Utiliser border-collapse: séparer; n’a pas fonctionné pour moi, car je n’ai besoin que d’une marge entre les cellules de la table et non sur les côtés de la table.

Je suis venu avec la solution suivante:

CSS

 .tableDiv{ display: table; } .cellSeperator { display: table-cell; width: 20px; } .cell1 { display: table-cell; width: 200px; } .cell2 { display: table-cell; width: 50px; } 

HTML

 

Cette solution fonctionne pour les td nécessitant à la fois une border et un padding pour le style.
(Testé sur Chrome 32, IE 11, Firefox 25)

 CSS: table {border-collapse: separate; border-spacing:0; } /* separate needed */ td { display: inline-block; width: 33% } /* Firefox need inline-block + width */ td { position: relative } /* needed to make td move */ td { left: 10px; } /* push all 10px */ td:first-child { left: 0px; } /* move back first 10px */ td:nth-child(3) { left: 20px; } /* push 3:rd another extra 10px */ /* to support older browsers we need a class on the td's we want to push td.col1 { left: 0px; } td.col2 { left: 10px; } td.col3 { left: 20px; } */ HTML: 
Player Result Average

Mis à jour 2016

Firefox le supporte maintenant sans inline-block et une width définie

 table {border-collapse: separate; border-spacing:0; } td { position: relative; padding: 5px; } td { left: 10px; } td:first-child { left: 0px; } td:nth-child(3) { left: 20px; } td { border: 1px solid gray; } /* CSS table */ .table {display: table; } .tr { display: table-row; } .td { display: table-cell; } .table { border-collapse: separate; border-spacing:0; } .td { position: relative; padding: 5px; } .td { left: 10px; } .td:first-child { left: 0px; } .td:nth-child(3) { left: 20px; } .td { border: 1px solid gray; } 
 
Player Result Average
Player
Result
Average

Vous ne pouvez pas isoler des colonnes individuelles dans une cellule de cette manière. A mon avis, la meilleure option est d’append un style='padding-left:10px' sur la deuxième colonne et d’appliquer les styles sur un div ou un élément interne. De cette façon, vous pouvez obtenir l’illusion d’un plus grand espace.

Si vous avez le contrôle de la largeur de la table, insérez un padding-left sur toutes les cellules de la table et insérez une marge négative à gauche de la table.

 table { margin-left: -20px; width: 720px; } table td { padding-left: 20px; } 

Notez que la largeur de la table doit inclure la largeur de remplissage / marge. En utilisant l’exemple ci-dessus, la largeur visuelle de la table sera de 700px.

Ce n’est pas la meilleure solution si vous utilisez des bordures sur vos cellules de tableau.

SOLUTION

J’ai trouvé que le meilleur moyen de résoudre ce problème était une combinaison d’essais et d’erreurs et de lire ce qui était écrit avant moi:

http://jsfiddle.net/MG4hD/

Comme vous pouvez le voir, il se passe des choses assez délicates …

ÉLÉMENT PARENT (UL): effondrement des frontières: séparé; espacement des bordures: .25em; margin-left: -25em;
CHILD ELEMENTS (LI): affichage: tableau-cellule; alignement vertical: milieu;

HTML

 
  • 3yr
  • in
    stall
  • 9x5
  • on
    site
  • globe
  • back
    to hp

CSS

 ul { border: none !important; border-collapse: separate; border-spacing: .25em; margin: 0 0 0 -.25em; } li { background: #767676 !important; display: table-cell; vertical-align: middle; position: relative; border-radius: 5px 0; text-align: center; color: white; padding: 0 !important; font-size: .65em; width: 4em; height: 3em; padding: .25em !important; line-height: .9; text-transform: uppercase; } 

Suite à la solution de Cian consistant à définir une bordure à la place d’une marge, j’ai découvert que vous pouviez définir la couleur de la bordure sur transparente pour éviter d’avoir à colorier l’arrière-plan. Fonctionne dans FF17, IE9, Chrome v23. Semble une solution décente à condition que vous n’ayez pas besoin d’une frontière réelle.

       
Jill Smith 50
Eve Jackson 94
John Doe 80

Vous pouvez les utiliser tous les deux:

 padding-right:10px; padding-right:10%; 

Mais il vaut mieux utiliser avec % .

Si le remplissage ne fonctionne pas pour vous, un autre travail consiste à append des colonnes supplémentaires et à définir une marge via la largeur en utilisant

. Aucune des solutions de remplissage ci-dessus ne fonctionnait pour moi car j’essayais de donner une marge à la frontière de la cellule, et c’est ce qui a finalement résolu le problème:

 
data more data

Style des bordures des cellules du tableau à l’aide de: nth-child afin que les 2ème et 3ème colonnes apparaissent comme une seule colonne.

 table tr td:nth-child(2) { border: 1px solid black; border-right:0; } table tr td:nth-child(3) { border: 1px solid black; border-left:0; }