Marge cellulaire CSS
-
23-08-2019 - |
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.
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:
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; }