web-dev-qa-db-fra.com

Marge cellulaire CSS

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 sur le côté gauche, mais sans effet.

htmlcsscellmargincss-tables
79
Tom

Appliquez ceci à votre premier <td>:

padding-right:10px;

exemple HTML:

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>
79
roman m

Un mot d'avertissement: bien que padding-right puisse résoudre votre problème (visuel) particulier, ce n'est pas la bonne façon d'ajouter un espacement entre des cellules de tableau. Ce que padding-right fait pour une cellule est similaire à celui de la plupart des autres éléments: il ajoute un espace dans la cellule. Si les cellules n'ont pas de bordure ou de couleur d'arrière-plan ou quelque chose d'autre qui diffuse le jeu, cela peut imiter l'effet de réglage de 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 - Tables - Disposition visuelle du contenu de la table

Les éléments de table internes génèrent boîtes rectangulaires avec contenu et les frontières. Les cellules ont aussi un rembourrage . Les éléments de table internes n'ont pas les marges.

Quelle est la "bonne" façon alors? Si vous souhaitez remplacer l'attribut cellspacing de la table, alors border-spacing (avec border-collapse désactivé) est un remplacement. Toutefois, si des "marges" par cellule sont requises, je ne sais pas comment cela peut être correctement réalisé à l'aide de CSS. Le seul hack auquel je puisse penser est d'utiliser padding comme ci-dessus, d'éviter tout style de cellules (couleurs d'arrière-plan, bordures, etc.) et d'utiliser plutôt des conteneurs DIV à l'intérieur des cellules pour mettre en œuvre un tel style.

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

À votre santé!

143
ravi

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

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

Je me rends compte que cela est assez tardif, mais pour l’information, vous pouvez également utiliser des sélecteurs CSS (ce qui élimine le besoin de styles en ligne).

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

Et ce serait votre HTML, sans CSS !:

<table><tr><td>data</td><td>more data</td></tr></table>

Cela permet un balisage beaucoup plus élégant, en particulier dans les cas où vous devez effectuer un grand nombre de mises en forme spécifiques avec CSS. 

14
Rob

malheureusement, la marge ne fonctionne pas sur des cellules individuelles. Toutefois, vous pouvez ajouter des colonnes supplémentaires entre les deux cellules entre lesquelles vous souhaitez insérer un espace. Une autre option consiste à utiliser une bordure de la même couleur que l'arrière-plan ...

14
Cian

Vous pouvez simplement faire ça:

<html>
<table>
    <tr>
        <td>one</td>
        <td width="10px"></td>
        <td>two</td>
    </tr>
</table>
</html>

Aucun CSS n'est requis :) Ce 10 pixels est votre espace.

8
Trebor

Essayez padding-right. Vous n'êtes pas autorisé à mettre margin's entre les cellules.

<table>
   <tr>
      <td style="padding-right: 10px;">one</td>
      <td>two</td>
   </tr>
</table>
7
mpen

Utilisation de border-collapse: separer; n'a pas fonctionné pour moi, car je n'ai besoin que d'une marge entre les cellules du tableau, pas sur les côtés.

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

<div class="tableDiv">
    <div class="cell1"></div>
    <div class="cellSeperator"></div>
    <div class="cell2"></div>
</div>
4
Robin

Cette solution fonctionne pour les noms td qui nécessitent à la fois border et 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:
<table>
    <tr>
        <td class='col1'>Player</td>
        <td class='col2'>Result</td>
        <td class='col3'>Average</td>
    </tr>
</table>

Mise à jour 2016

Firefox le supporte maintenant sans inline-block et un ensemble width

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; }
<table>
  <tr>
    <td>Player</td>
    <td>Result</td>
    <td>Average</td>
  </tr>
</table>

<div class="table">
  <div class="tr">
    <div class="td">Player</div>
    <div class="td">Result</div>
    <div class="td">Average</div>
  </div>
</div>

4
LGSon

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

2
jerebear

SOLUTION

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

http://jsfiddle.net/MG4hD/


Comme vous pouvez le constater, il se passe des choses assez délicates ... mais le principal moyen de faire en sorte que cela soit beau est: 

PARENT ELEMENT (UL): effondrement de la bordure: séparé; espacement de bordure: 0,25 um; marge gauche: -.25em; 
ELEMENTS POUR ENFANTS (LI): affichage: table-cellule; alignement vertical: milieu; 

HTML

<ul>
<li><span class="large">3</span>yr</li>
<li>in<br>stall</li>
<li><span class="large">9</span>x<span class="large">5</span></li>
<li>on<br>site</li>
<li>globe</li>
<li>back<br>to hp</li>
</ul>

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; }
2
Oneezy

Si vous avez le contrôle sur la largeur de la table, insérez une marge de remplissage dans toutes les cellules et insérez une marge négative à la 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 ce qui précède comme exemple, la largeur visuelle du tableau sera de 700px.

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

2
Dallas Clark

Vous pouvez utiliser les deux:

padding-right:10px;

padding-right:10%;

Mais il vaut mieux utiliser avec% .

1
Muhammad Awais

En suivant la solution de Cian consistant à définir une bordure à la place d'une marge, j'ai découvert que vous pouvez définir la couleur de la bordure sur transparente afin d'éviter d'avoir à faire correspondre la couleur à l'arrière-plan. Fonctionne dans FF17, IE9, Chrome v23. Cela semble être une solution décente à condition que vous n'ayez pas besoin d'une frontière réelle.

1
Vitaly Chernobyl

<!DOCTYPE html>
<html>
<head>
<style>
table{
border-spacing: 16px 4px;
}

 td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  </tr>
</table>

</body>
</html>

Utiliser le rembourrage n’est pas une bonne façon de procéder. Cela peut changer l’aspect mais ce n’est pas ce que vous souhaitiez Cela peut résoudre votre problème.

1
Karthik Sen

Si le remplissage ne fonctionne pas pour vous, vous pouvez également ajouter des colonnes supplémentaires et définir une marge via width à l'aide de <colgroup>. Aucune des solutions de rembourrage ci-dessus ne fonctionnait pour moi alors que j'essayais de laisser une marge à la cellule, et voici ce qui a finalement résolu le problème:

<table>
  <colgroup>
    <col>
    <col width="20px">
    <col>
  </colgroup>
  <tr>
     <td>data</td>
     <td></td>
     <td>more data</td>
   </tr>
</table>

Stylisez les bordures des cellules du tableau en utilisant: nth-child, de sorte que les deuxième et troisième colonnes apparaissent sous la forme d'une colonne unique.

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; }
0
Ezra