Question Espace entre deux lignes dans une table?


Est-ce possible via CSS?

j'essaie

tr.classname {
  border-spacing: 5em;
}

en vain. Peut-être que je fais quelque chose de mal?


670
2017-12-08 21:49


origine


Réponses:


Vous devez utiliser un rembourrage sur votre td éléments. Quelque chose comme ça devrait faire l'affaire. Vous pouvez, bien sûr, obtenir le même résultat en utilisant un rembourrage supérieur au lieu d'un rembourrage inférieur.

Dans le code CSS ci-dessous, le signe supérieur à signifie que le remplissage n'est appliqué qu'à td les éléments qui sont les enfants directs à tr éléments avec la classe spaceUnder. Cela permettra d'utiliser des tables imbriquées. (Cell C et D dans l'exemple de code.) Je ne suis pas sûr de la prise en charge du navigateur pour le sélecteur d'enfant direct (pensez IE 6), mais il ne devrait pas casser le code dans les navigateurs modernes.

/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */

tr.spaceUnder>td {
  padding-bottom: 1em;
}
<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

Cela devrait ressembler à ceci:

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+

474
2017-12-10 17:18



Dans la table parent, essayez de définir

border-collapse:separate; 
border-spacing:5em;

Plus une déclaration de frontière, et voir si cela réalise l'effet désiré. Méfiez-vous, cependant, que IE ne supporte pas le modèle "frontières séparées".


319
2017-12-08 21:52



Vous avez une table avec des albums d'id avec n'importe quelle donnée ... J'ai omis les très et très tds

<table id="albums" cellspacing="0">       
</table>

Dans le css:

table#albums 
{
    border-collapse:separate;
    border-spacing:0 5px;
}

163
2017-10-20 13:49



Puisque j'ai une image de fond derrière la table, truquer avec un rembourrage blanc ne fonctionnerait pas. J'ai opté pour mettre une rangée vide entre chaque ligne de contenu:

<tr class="spacer"><td></td></tr>

Utilisez ensuite css pour donner aux lignes d'espacement une certaine hauteur et un arrière-plan transparent.


122
2017-08-09 02:41



De Mozilla Developer Network:

La propriété CSS border-spacing spécifie la distance entre les bordures des cellules adjacentes (uniquement pour le modèle de bordures séparées). Ceci est équivalent à l'attribut cellspacing dans HTML de présentation, mais une seconde valeur facultative peut être utilisée pour définir différents espacements horizontaux et verticaux.

Cette dernière partie est souvent supervisée. Exemple:

.your-table {
    border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */

METTRE À JOUR

Je comprends maintenant que le PO veut que les rangées spécifiques séparées aient un espacement accru. J'ai ajouté une configuration avec tbody éléments qui accomplit cela sans ruiner la sémantique. Cependant, je ne suis pas sûr si elle est prise en charge sur tous les navigateurs. Je l'ai fait dans Chrome.

L'exemple ci-dessous montre comment vous pouvez donner l'impression que la table est composée de rangées séparées, une douceur css complète. A également donné la première rangée plus d'espacement avec le tbody installer. N'hésitez pas à utiliser!

Note de support: IE8 +, Chrome, Firefox, Safari, Opera 4+

.spacing-table {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 15px;
  border-collapse: separate;
  table-layout: fixed;
  width: 80%;
  border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
  text-align: left;
  padding: 5px 15px;
}
.spacing-table td {
  border-width: 3px 0;
  width: 50%;
  border-color: darkred;
  border-style: solid;
  background-color: red;
  color: white;
  padding: 5px 15px;
}
.spacing-table td:first-child {
  border-left-width: 3px;
  border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
  border-right-width: 3px;
  border-radius: 0 5px 5px 0;
}
.spacing-table thead {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.spacing-table tbody {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 0 10px;
}
<table class="spacing-table">
  <thead>
    <tr>
        <th>Lead singer</th>
        <th>Band</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Bono</td>
        <td>U2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
        <td>Chris Martin</td>
        <td>Coldplay</td>
    </tr>
    <tr>
        <td>Mick Jagger</td>
        <td>Rolling Stones</td>
    </tr>
    <tr>
        <td>John Lennon</td>
        <td>The Beatles</td>
    </tr>
  </tbody>
</table>


57
2018-02-27 13:57



Vous pouvez essayer d'ajouter une ligne de séparation:

html:

<tr class="separator" />

css:

table tr.separator { height: 10px; }

52
2017-08-23 19:44



Vous ne pouvez pas modifier la marge d'une cellule de tableau. Mais vous pouvez changer le rembourrage. Changez le remplissage du TD, ce qui agrandira la cellule et repoussera le texte du côté avec le rembourrage augmenté. Si vous avez des frontières, cependant, ce ne sera toujours pas exactement ce que vous voulez.


46
2017-12-08 21:59



Ok, vous pouvez faire

tr.classname td {background-color:red; border-bottom: 5em solid white}

Assurez-vous que la couleur d'arrière-plan est définie sur le td plutôt que sur la ligne. Cela devrait fonctionner sur la plupart des navigateurs ... (Chrome, ie & ff testé)


19
2018-06-22 08:13



Vous devez définir border-collapse: separate; sur la table; la plupart des feuilles de style par défaut du navigateur commencent à border-collapse: collapse;, qui fossé l'espacement des frontières.

En outre, l'espacement des frontières: va sur le TD, pas le TR.

Essayer:

<html><head><style type="text/css">
    #ex    { border-collapse: separate; }
    #ex td { border-spacing: 1em; }
</style></head><body>
    <table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>

19
2017-08-27 17:18



Vous pouvez utiliser hauteur de la ligne dans la table:

<table style="width: 400px; line-height:50px;">

16
2018-06-12 02:56



tr { 
    display: block;
    margin-bottom: 5px;
}

13
2018-01-26 15:17