Question

Dans mon document HTML, j'ai une table 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 « la marge droite: 10px; » à chacune des cellules sur le côté gauche, mais sans effet.

Était-ce utile?

La solution

Appliquer ce à votre première <td>: 

padding-right:10px;

HTML par exemple: 

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

Autres conseils

Un mot d'avertissement: si padding-right peut résoudre votre problème particulier (visuel), il est pas la bonne façon d'ajouter l'espacement entre cellules de table. Qu'est-ce 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 les la cellule. Si les cellules ne sont pas une couleur de bordure arrière-plan ou quelque chose d'autre qui donne le jeu loin, cela peut imiter l'effet de mettre l'espace entre les cellules, mais pas autrement.

Comme quelqu'un a noté, les spécifications de marge sont ignorées pour les cellules de table:

CSS 2.1 Spécification - Tableaux - La disposition visuelle du contenu de la table

  

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

Quelle est la « bonne », alors? Si vous cherchez à remplacer l'attribut cellspacing de la table, puis border-spacing (avec border-collapse désactivé) est un remplacement. Toutefois, si par cellule « marges » sont nécessaires, je ne sais pas comment cela peut être correctement réalisé en utilisant CSS. La seule astuce que je peux penser est d'utiliser padding comme ci-dessus, éviter tout style des cellules (couleurs d'arrière-plan, les frontières, etc.) et utiliser à la place de conteneurs DIVs à l'intérieur des cellules pour mettre en œuvre ce style.

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

.

Vive!

Si vous ne pouvez pas utiliser un rembourrage (par exemple, vous avez des frontières en td) essayer 

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

Je sais que cela est tout à fait tardive, mais pour l'enregistrement, vous pouvez également utiliser des sélecteurs CSS pour le faire (en éliminant la nécessité de styles en ligne.) Ce CSS applique un rembourrage à la première colonne de chaque ligne: 

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

Et ce serait votre HTML, CSS sans: 

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

Cela permet de balisage beaucoup plus élégant, surtout dans les cas où vous avez besoin de faire beaucoup de mise en forme spécifique avec CSS.

marge ne cependant vous pouvez travailler malheureusement pas sur les cellules individuelles, ajouter des colonnes supplémentaires entre les deux cellules que vous souhaitez mettre un espace entre ... une autre option est d'utiliser une frontière avec la même couleur que l'arrière-plan ...

Vous pouvez tout simplement pas: 

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

Non CSS est nécessaire :) Ce 10px est votre espace.

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

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

Utilisation border-collapse:. Séparée; ne fonctionne pas pour moi, parce que je ne ai besoin d'une marge entre les cellules de table pas 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 

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

Ce travail de solution pour des années td qui ont besoin à la fois border et padding pour le style.
 (Testé sur Chrome 32, 11 IE, 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 prennent désormais en charge 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>

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

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

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

table td {
    padding-left: 20px;
}

Note, la largeur de la table doit inclure la largeur rembourrage / marge. En utilisant ce qui précède à titre d'exemple, la largeur visuelle de la table sera 700px.

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

SOLUTION

J'ai trouvé la meilleure façon de résoudre ce problème a été une combinaison d'essais et d'erreurs et de lire ce qui était écrit devant moi:

http://jsfiddle.net/MG4hD/


Comme vous pouvez le voir, j'ai des trucs assez délicate passe ... mais le kicker principal d'obtenir ce à la recherche de bonnes sont:

ELEMENT PARENT (UL):-collapse frontière: séparée; L'espacement de la bordure: .25em; margin-left: -.25em;
Eléments enfants (LI): display: table de cellules; Vertical-align: moyenne;

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

Après la solution de Cian de fixer une frontière en place d'une marge, je découvre que vous pouvez définir la couleur de frontière transparente pour éviter d'avoir à la couleur correspondant à l'arrière-plan. Travaux dans FF17, IE9, Chrome v23. On dirait une solution décente à condition que vous ne devez pas non plus une frontière réelle. 

<!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>

Utilisation de rembourrage ne sont pas correctement de le faire, il peut changer le look, mais ce n'est pas ce que vous vouliez. Cela peut résoudre votre problème.

Vous pouvez utiliser les deux: 

padding-right:10px;

padding-right:10%;

Mais il est préférable d'utiliser avec % .

Si le rembourrage ne fonctionne pas pour vous, un autre travail autour d'ajouter des colonnes supplémentaires et définir une marge par largeur à l'aide <colgroup>. Aucune des solutions de remplissage ci-dessus travaillaient pour moi alors que je tentais de donner la frontière de cellule elle-même une marge, ce qui est ce qui a résolu le problème à la fin: 

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

Style les frontières des cellules de la table. Nième enfant afin que les 2e et troisième colonnes semblent être 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; }
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top