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.
Réponses:
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>border-collapse: separate(il y avait une faute de frappe dans l'orthographe separateci - dessus)
border-spacing: 5px;
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.
border-spacingprend deux arguments - un pour horizontal et un pour vertical.
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é!
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 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 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 ...
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.
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>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>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.
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.
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:
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; }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.
<!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 le faire, cela peut changer l'apparence 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 vaut mieux utiliser avec % .
%
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; }