Marge de cellule CSS

95

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.

html css cell margin css-tables À M
la source

Il existe une bonne solution CSS ici, récemment mise à jour: stackoverflow.com/a/21551008/2827823

Ason le

89

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>

romain m
la source

12

Une bien meilleure approche serait d'utiliser l'effondrement des frontières:

séparé

21

Juste au cas où quelqu'un copier / coller la technique d'effondrement de la frontière, le commentaire ci-dessus devrait l'être border-collapse: separate(il y avait une faute de frappe dans l'orthographe separateci - dessus)

Tony DiNitto

1

Aussi, si vous souhaitez définir la quantité d'espace entre les bordures, vous devrez utiliserborder-spacing: 5px;

Sølve Tornøe

border-spacingajoute également de l'espace entre les lignes. Malheureusement, il n'y a pas de propriété distincte pour l'espacement vertical et horizontal.

Lee Blake

border-spacingprend deux arguments - un pour horizontal et un pour vertical.

OldTinfoil

152

Un mot d'avertissement: bien que cela padding-rightpuisse résoudre votre problème (visuel) particulier, ce n'est pas la bonne façon d'ajouter de l'espacement entre les cellules du tableau. Ce que padding-rightfait pour une cellule est similaire à ce qu'il fait pour la plupart des autres éléments: cela ajoute de l'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 donne le jeu, cela peut imiter 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 des tableaux

Les éléments de tableau internes génèrent des boîtes rectangulaires avec du contenu et des bordures. Les cellules ont également un remplissage. Les éléments de table internes n'ont pas de marges.

Quelle est la "bonne" façon alors? Si vous cherchez à remplacer l' cellspacingattribut de la table, alors border-spacing(avec border-collapsedésactivé) est un remplacement. Cependant, si des "marges" par cellule sont nécessaires, je ne sais pas comment cela peut être correctement réalisé en utilisant CSS. Le seul hack auquel je puisse penser est d'utiliser paddingcomme ci-dessus, d'éviter tout style des cellules (couleurs d'arrière-plan, bordures, etc.) et d'utiliser à la place des conteneurs DIV à l'intérieur des cellules pour implémenter un tel style.

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

À votre santé!

ravi
la source

C'est génial et tout pour le rembourrage, mais qu'en est-il pour la marge? Je souhaite ajouter de l'espace à l'extérieur de la cellule contenant une bordure. La marge CSS semble n'avoir aucun effet sur les cellules.

Levitikon

1

Levitikon, c'est vrai - les marges ne fonctionnent pas pour les raisons ci-dessus. La seule façon d'obtenir ce que vous voulez, AFAIK, est d'encapsuler le contenu de la cellule dans un DIV, d'ajouter la marge et la bordure à ce DIV, plutôt qu'à la cellule.

ravi

J'ai posté une solution CSS il y a longtemps (mise à jour aujourd'hui): stackoverflow.com/a/21551008/2827823

Ason le

28

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

nika206
la source

3

Vous pouvez en savoir plus sur border-collapse: séparez ici css-tricks.com/almanac/properties/b/border-collapse

Gaurav Ramanan

14

Je me rends compte que c'est assez tardif, mais pour mémoire, vous pouvez également utiliser des sélecteurs CSS pour ce faire (éliminant le besoin 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, 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 faire beaucoup de mise en forme spécifique avec CSS.

la source

14

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

Cian
la source

Il semble que la bordure présente le même problème que le remplissage - elle ajoute de l'espace entre le contenu de la cellule et la limite, pas à l'extérieur de la limite.

stewbasic

11

Vous pouvez simplement le faire:

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

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

MrTrebor
la source

c'est bon, simple et efficace, merci de me le rappeler +1

Hayden Thring

8

Ce n'est pas une bonne approche pour séparer la structure et le style. Il ne s'agit pas de savoir si CSS est nécessaire ou non - CSS devrait être utilisé pour quelque chose comme ça.

Simon Robb

ne devrait pas être <td style = "width: 10px;"> </td>

Rune Jeppesen

1

N'oubliez pas que les solutions les plus simples sont les meilleures. La méthode avec le style en ligne est également bonne :)

MrTrebor

Cela fonctionne pour mon cas spécifique. Très créatif. Merci

Phan Van Linh

7

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

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

mpen
la source

4

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

J'ai proposé 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>

Robin
la source

4

Cette solution fonctionne pour ceux tdqui ont besoin à la fois borderet paddingpour 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 prend désormais en charge sans inline-blocket un ensemblewidth

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>

Développer l'extrait

Un fils
la source

Cela a également fonctionné pour les tables css (display: table *) constituées de div.

Necreaux

2

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

jerebear
la source

2

Si vous avez le contrôle de la largeur du tableau, insérez un remplissage à gauche sur toutes les cellules du tableau et insérez une marge négative à gauche sur l'ensemble du tableau.

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

table td {
    padding-left: 20px;
}

Notez que la largeur du tableau doit inclure la largeur de remplissage / marge. En utilisant ce qui précède comme exemple, la largeur visuelle du tableau sera de 700 px.

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

Dallas Clark
la source

2

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, j'ai des choses assez délicates en cours ... mais le principal facteur de succès pour que cela soit beau est:

ÉLÉMENT PARENT (UL): border-collapse: séparé; espacement des bordures: .25em; marge gauche: -.25em;
ÉLÉMENTS ENFANTS (LI): affichage: cellule-table; 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; }

Oneezy
la source

1

Suite à 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 pour éviter d'avoir à faire correspondre la couleur de l'arrière-plan. Fonctionne sous FF17, IE9, Chrome v23. Cela semble être une solution décente à condition que vous n'ayez pas besoin d'une frontière réelle.

Vitaly Tchernobyl
la source

1

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

Développer l'extrait

Utiliser le rembourrage n'est pas une bonne façon de le faire, cela peut changer l'apparence mais ce n'est pas ce que vous vouliez. Cela peut résoudre votre problème.

Sengottaian Karthik
la source

Cette solution est déjà postée, pas besoin de 2 réponses disant la même chose.

Ason

1

Vous pouvez utiliser les deux:

padding-right:10px;

padding-right:10%;

Mais il vaut mieux utiliser avec % .

Muhammad Awais
la source

1

J'ai voté pour, mais vous avez peut-être expliqué pourquoi il est préférable d'utiliser%

Mawg dit de réintégrer Monica le

1

Normalement,% est utilisé pour rendre responsive.

Muhammad Awais

1

Plus un - peut-être pourriez-vous modifier votre réponse pour le dire? Pas très quelqu'un qui lit pourrait lire les commentaires. Si vous voulez ajouter un lien vers quelque chose sur le design réactif, encore mieux :-)

Mawg dit réintégrer Monica

1

Si le remplissage ne fonctionne pas pour vous, une autre solution consiste à ajouter des colonnes supplémentaires et à définir une marge via la largeur à l'aide de <colgroup>. Aucune des solutions de remplissage ci-dessus ne fonctionnait pour moi car j'essayais de donner une marge à la bordure de la cellule elle-même, et c'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 bordures des cellules du tableau en utilisant: nth-child de sorte que les deuxième et troisiè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; }

Ezra
la source

C'est masquer le problème, pas y répondre. Personne n'apprendra comment le faire correctement en faisant cela

Mawg dit de réintégrer Monica le

Marge de cellule CSS

Réponses:

SOLUTION