web-dev-qa-db-fra.com

Comment ajouter une marge à une ligne de tableau <tr>

J'ai une table contenant beaucoup de lignes. Certaines de ces lignes sont class="highlight" et signifient une ligne qui doit être stylée différemment et mise en surbrillance. Ce que j'essaie de faire est d'ajouter un espacement supplémentaire avant et après ces lignes afin qu'elles apparaissent légèrement séparées des autres lignes. 

Je pensais pouvoir faire ceci avec margin-top:10px;margin-bottom:10px; mais cela ne fonctionnait pas. Quelqu'un sait comment faire cela, ou si cela pourrait être fait? Voici le code HTML et j'ai mis le deuxième test dans la classe en surbrillance.

<table>
<thead>
  <tr>
     <th>Header 1</th>
     <th>Header 2</th>
  </tr>
</thead>
<tbody>
  <tr>
     <td>Value1</td>
     <td>Value2</td>
  </tr>
  <tr class="highlight">
     <td>Value1</td>
     <td>Value2</td>
  </tr>
  <tr>
     <td>Value1</td>
     <td>Value2</td>
  </tr>
  <tr>
     <td>Value1</td>
     <td>Value2</td>
  </tr>
</tbody>
</table>
css
136
sameold

Les lignes de table ne peuvent pas avoir de valeur de marge. Pouvez-vous augmenter le rembourrage? Ça marcherait. Sinon, vous pourriez insérer un <tr class="spacer"></tr> avant et après les lignes class="highlighted".

121
Steve Binder

La propriété border-spacing fonctionnera pour ce cas particulier.

table {
  border-collapse:separate; 
  border-spacing: 0 1em;
}

Référence.

79
Mark

Vous ne pouvez pas nommer le <tr>s eux-mêmes, mais vous pouvez attribuer un style à <td>s dans le "surlignage" <tr>s.

tr.highlight td {padding-top: 10px; padding-bottom:10px}
51
Mr Lister

line-height peut être la solution possible

tr
{
    line-height:30px;
}
21
Mehmet Eren Yener

Je sais que c'est un peu vieux, mais je viens de recevoir quelque chose dans le même sens. Tu ne pouvais pas faire ça?

tr.highlight {
    border-top: 10px solid;
    border-bottom: 10px solid;
    border-color: transparent;
}

J'espère que cela t'aides.

18
Jrd

Tout d'abord, n'essayez pas de mettre une marge sur un <tr> ou un <td> car cela ne fonctionnera pas avec le rendu moderne.

  • Solution 1

Bien que la marge ne fonctionne pas, padding ne fonctionne pas:

td{
    padding-bottom: 10px;
    padding-top: 10px;
}

Attention: Ceci éloignera également la bordure de l'élément. Si votre bordure est visible, vous pouvez utiliser la solution 2 à la place.

  • Solution 2

Pour que la bordure reste proche de l'élément et imite la marge, insérez un autre <tr> entre chacun des <tr> de votre table des bobines, comme suit:

<tr style="height: 20px;"> <!-- Mimic the margin -->
</tr>
11
Antoine Pelletier

Étant donné que margin est ignoré sur tr, j’utilise habituellement une solution de contournement en définissant un border-bottom ou border-top transparent et en définissant la propriété background-clip sur padding-box afin que background-color ne soit pas peint sous la bordure.

table {
   border-collapse: collapse; /* [1] */
}

th, td {
  border-bottom: 5px solid transparent; /* [2] */
  background-color: gold; /* [3] */
  background-clip: padding-box; /* [4] */
}
  1. Assure que les cellules partagent une bordure commune, mais est complètement facultatif. La solution fonctionne sans elle.
  2. La valeur 5px représente la marge que vous souhaitez atteindre
  3. Définit le background-color de votre ligne/cellule
  4. S'assure que la background ne soit pas peinte sous la border

voir une démo ici: http://codepen.io/meodai/pen/MJMVNR?editors=1100

background-clip est pris en charge dans tout navigateur moderne . (Et IE9 +)

Sinon, vous pouvez utiliser un border-spacing. Mais cela ne fonctionnera pas avec border-collapse défini sur collapse.

7
meo

Cela ne va pas être parfait, mais j’ai eu le plaisir de découvrir que vous pouvez contrôler l’espacement horizontal et vertical l’espacement des borduresséparément:

table
{
 border-collapse: separate;
 border-spacing: 0 8px;
}
5
John

Un moyen d'imiter la marge sur la ligne serait d'utiliser le pseudo-sélecteur pour ajouter un espacement sur la td.

.highlight td::before, .highlight td::after
{
  content:"";
  height:10px;
  display:block;
}

De cette façon, tout ce qui est marqué avec la classe de surbrillance sera séparé en haut et en bas.

https://jsfiddle.net/d0zmsrfs/

4
Alex

Un hack pour donner l’apparence des marges entre les lignes d’un tableau consiste à leur donner une bordure de la même couleur que l’arrière-plan. Ceci est utile lors de la création d'un thème tiers où vous ne pouvez pas modifier le balisage HTML. Par exemple:

tr{ 
    border: 5px solid white;
}
3
user3880247

Vous pouvez essayer d’utiliser des transformations CSS pour indenter tout un tr:

tr.indent {
   -webkit-transform: translate(20px,0);
   -moz-transform: translate(20px,0);
}

Je pense que c'est une solution valable. Semble fonctionner correctement dans Firefox 16, Chrome 23 et Safari 6 sous OSX. 

2
Tomi Mickelsson

Voici une façon soignée de le faire:

table tr {
    border-bottom: 4px solid;
}

Cela va ajouter 4px d'espacement vertical entre chaque ligne. Et si vous ne voulez pas que cette frontière touche le dernier enfant:

table tr:last-child {
    border-bottom: 0;
}

Rappelez-vous que les pseudo-sélecteurs CSS3 ne fonctionneront que dans IE 8 et avec selectivizr.

2
user1429980

J'ai abandonné et inséré un simple code jQuery comme ci-dessous. Cela ajoutera un tr après chaque tr, si vous en avez tellement comme moi . Démo: https://jsfiddle.net/acf9sph6/

<table>
  <tbody>
     <tr class="my-tr">
        <td>one line</td>
     </tr>
     <tr class="my-tr">
        <td>one line</td>
     </tr>
     <tr class="my-tr">
        <td>one line</td>
     </tr>
  </tbody>
</table>
<script>
$(function () {
       $("tr.my-tr").after('<tr class="tr-spacer"/>');
});
</script>
<style>
.tr-spacer
{
    height: 20px;
}
</style>
1
Jenny

Vous pouvez créer un espace entre les lignes d'un tableau en ajoutant une ligne vide de cellules comme celle-ci ...

<tr><td></td><td></td></tr>

CSS peut ensuite être utilisé pour cibler les cellules vides comme ceci…

table :empty{border:none; height:10px;}

NB: Cette technique n'est valable que si aucune de vos cellules normales ne sera vide/vide.

Même un espace insécable permettra d'éviter qu'une cellule ne soit ciblée par la règle CSS ci-dessus.

Inutile de mentionner que vous pouvez ajuster la hauteur de l'espace à votre convenance avec la propriété height incluse.

0
user4723924

Une autre possibilité consiste à utiliser un pseudo sélecteur: after ou: before

tr.highlight td:last-child:after
{
  content: "\0a0";
  line-height: 3em;
}

Cela pourrait éviter des problèmes avec le navigateur qui ne comprennent pas les pseudo-sélecteurs, plus les couleurs de fond ne sont pas un problème.

L'inconvénient est qu'il ajoute des espaces après la dernière cellule.

0
Herbert Peters

ajoute ce style avant la classe = "en surbrillance" padding-bottom et display est inline-table

0
mohamed abo elmagd

Je vous suggère fortement de jeter un coup d'œil à vos analyses et de voir combien d'utilisateurs d'IE7 ou moins vous visitez sur le site. J'ai constaté que je pouvais maintenant abandonner le support pour IE7, ce qui signifie que je peux utiliser des tables CSS ... ce qui facilitera grandement le travail.

0
user1337

ajoutez un div aux cellules que vous souhaitez ajouter un espacement supplémentaire:

<tr class="highlight">
 <td><div>Value1</div></td>
 <td><div>Value2</div></td>
</tr>
tr.highlight td div {
margin-top: 10px;
}
0
user3540275

Pour ce qui en vaut la peine, j’ai tiré parti du fait que j’utilisais déjà bootstrap (4.3), car j’avais besoin d’ajouter des marges, des ombres au rectangle et des rayons dans la rangée, ce que je ne peux pas faire avec les tableaux.

<div id="loop" class="table-responsive px-4">
<section>
    <div id="thead" class="row m-0">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
    <div id="tbody" class="row m-0">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
</section>
</div>

Sur css j’ai ajouté quelques lignes pour maintenir le comportement de bootstrap à la table

@media (max-width: 800px){
    #loop{
        section{
            min-width: 700px;
        }
    }
}
0
Gendrith