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?
Vous devez utiliser un remplissage sur vos éléments td. Quelque chose comme ça devrait faire l'affaire. Vous pouvez bien sûr obtenir le même résultat en utilisant un remplissage supérieur au lieu d'un remplissage inférieur.
Dans le code CSS ci-dessous, le signe supérieur à signifie que le remplissage est uniquement appliqué aux éléments td qui sont des enfants directs des éléments tr de la classe spaceUnder. Cela permettra d'utiliser des tables imbriquées. (Les cellules C et D dans l'exemple de code.) Je ne suis pas trop sûr de la prise en charge du sélecteur enfant direct par le navigateur (pensez à IE 6), mais cela 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 rendre un peu comme ceci:
+---+---+
| A | B |
+---+---+
| C | D |
| | |
+---+---+
| E | F |
+---+---+
Dans la table parente, essayez de définir
border-collapse:separate;
border-spacing:5em;
Plus une déclaration de frontière, et voyez si cela réalise l'effet désiré. Attention, cependant, IE ne prend pas en charge le modèle des "bordures séparées".
Vous avez table avec albums id avec des données ... J'ai omis les très et les tds
<table id="albums" cellspacing="0">
</table>
Dans le css:
table#albums
{
border-collapse:separate;
border-spacing:0 5px;
}
comme j'ai une image de fond derrière la table, la simuler avec un rembourrage blanc ne fonctionnerait pas. J'ai choisi de placer une ligne vide entre chaque ligne de contenu:
<tr class="spacer"><td></td></tr>
ensuite, utilisez css pour donner aux lignes d'espacement une certaine hauteur et un fond transparent.
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 le HTML de présentation , mais une deuxième valeur facultative peut être utilisée pour définir un espacement horizontal et vertical différent.
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> */
UPDATE
Je comprends maintenant que le PO veut que les rangées distinctes et 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 sais pas s'il est supporté par tous les navigateurs. Je l'ai fait en Chrome.
L’exemple ci-dessous montre comment vous pouvez donner l’impression que le tableau existe en rangées séparées, css en douceur. Également donné plus d'espacement à la première ligne avec la configuration tbody. N'hésitez pas à utiliser!
Avis 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>Vous pouvez essayer d’ajouter une ligne de séparation:
html:
<tr class="separator" />
css:
table tr.separator { height: 10px; }
Vous ne pouvez pas modifier la marge d'une cellule de tableau. Mais vous POUVEZ changer le rembourrage. Modifiez le remplissage du TD, ce qui agrandira la cellule et éloignez le texte du côté avec le remplissage accru. Si vous avez des lignes de frontière, cependant, ce ne sera toujours pas exactement ce que vous voulez.
Vous devez définir border-collapse: separate; sur la table; la plupart des feuilles de style par défaut du navigateur commencent par border-collapse: collapse;, ce qui indique l'espacement des bordures.
Aussi, border-spacing: 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>
Ok tu peux 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, c.-à-d. & Ff testé)
Vous pouvez utiliser line-height dans le tableau:
<table style="width: 400px; line-height:50px;">
Examinez les propriétés border-collapse: separ) (par défaut) et border-spacing .
Tout d’abord, vous devez les séparer avec border-collapse , puis vous peut définir l'espace entre les colonnes et les lignes avec la délimitation des bordures .
Ces deux propriétés CSS sont en réalité bien supportées par tous les navigateurs, voir ici .
table {border-collapse: separate; border-spacing: 10px 20px;}
table,
table td,
table th {border: 1px solid black;}<table>
<tr>
<td>Some text - 1</td>
<td>Some text - 1</td>
</tr>
<tr>
<td>Some text - 2</td>
<td>Some text - 2</td>
</tr>
<tr>
<td>Some text - 3</td>
<td>Some text - 3</td>
</tr>
</table>tr {
display: block;
margin-bottom: 5px;
}
Une réponse trop tardive :)
Si vous appliquez float aux éléments tr, vous pouvez insérer un espacement entre deux lignes avec l'attribut margin.
table tr{
float: left
width: 100%;
}
tr.classname {
margin-bottom:5px;
}
Pour créer une illusion d'espacement entre les lignes, appliquez la couleur d'arrière-plan à la ligne, puis créez une bordure épaisse de couleur blanche afin de créer un "espace" :)
tr
{
background-color: #FFD700;
border: 10px solid white;
}
La méthode correcte pour espacer les tableaux consiste à utiliser cellpadding et cellpacing, par ex.
<table cellpadding="4">
Je suis tombé sur cela tout en luttant avec un problème similaire. J'ai trouvé la réponse de Varun Natraaj très utile, mais j'utiliserais plutôt une bordure transparente.
td { border: 1em solid transparent; }
Les bordures transparentes ont toujours une largeur.
Fonctionne pour la plupart des navigateurs récents en 2015. Solution simple. Cela ne fonctionne pas pour la transparence, mais contrairement à la réponse de Thoronwen, je ne parviens pas à rendre le rendu transparent avec une taille quelconque.
tr {
border-bottom:5em solid white;
}
Il suffit de mettre div à l'intérieur du td et de définir les styles de div suivants:
margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;
Je me rends compte que c’est une réponse à un vieux sujet et peut ne pas être la solution demandée, mais bien que toutes les solutions suggérées ne fassent pas ce que j’avais besoin, cette solution a fonctionné pour moi.
J'avais 2 cellules de table, une avec la couleur de fond, l'autre avec une couleur de bordure. Les solutions ci-dessus suppriment la bordure, de sorte que la cellule de droite semble flotter dans les airs. La solution a été de remplacer les variables table, tr et td par des divs et les classes correspondantes: table serait div id="table_replacer", tr serait div class="tr_replacer" et td serait div class="td_replacer" (changer les balises fermantes en divs aussi évidemment)
Pour obtenir la solution à mon problème, le css est:
#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}
J'espère que ça aide quelqu'un.
Voici une solution simple et élégante, avec quelques mises en garde:
- Vous ne pouvez pas réellement rendre les lacunes transparentes, vous devez leur donner une couleur spécifique.
- Vous ne pouvez pas contourner les coins des frontières en haut et en bas des espaces vides
- Vous devez connaître le remplissage et les bordures de vos cellules de tableau.
Dans cet esprit, essayez ceci:
td {padding:5px 8px;border:2px solid blue;background:#E0E0E0} /* lets say the cells all have this padding and border, and the gaps should be white */
tr.gapbefore td {overflow:visible}
tr.gapbefore td::before,
tr.gapbefore th::before
{
content:"";
display:block;
position:relative;
z-index:1;
width:auto;
height:0;
padding:0;
margin:-5px -10px 5px; /* 5px = cell top padding, 10px = (cell side padding)+(cell side border width)+(table side border width) */
border-top:16px solid white; /* the size & color of the gap you want */
border-bottom:2px solid blue; /* this replaces the cell's top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */
}
Ce que vous êtes en train de faire, c'est de coller un bloc ::before rectangulaire dans le haut de toutes les cellules de la rangée que vous souhaitez précédée d'un espace. Ces blocs dépassent un peu des cellules pour chevaucher les frontières existantes et les masquer. Ces blocs ne sont que des bordures supérieure et inférieure intercalées: la bordure supérieure forme l'espace et la bordure inférieure reproduit l'apparence de la bordure supérieure d'origine des cellules.
Notez que si vous avez une bordure autour de la table ainsi que des cellules, vous devrez augmenter davantage la marge horizontale en -ve de vos "blocs". Donc, pour une bordure de table de 4 pixels, vous utiliseriez plutôt:
margin:-5px -12px 5px; /* 14px = original 10px + 2px for 'uncollapsed' part of table border */
Et si votre table utilise border-collapse:separate au lieu de border-collapse:collapse, vous devrez (a) utiliser toute la largeur de la bordure de la table:
margin:-5px -14px 5px; /* 14px = original 10px + 4px full width of table border */
... et aussi (b) remplacer la double largeur de bordure qui doit maintenant apparaître en dessous de l’espace:
border-bottom:4px solid blue; /* i.e. 4px = cell top border + previous row's bottom border */
La technique s’adapte facilement à une version .gapafter, si vous préférez, ou à la création d’espaces verticaux (colonnes) à la place des espaces vides.
Voici un codepen où vous pouvez le voir en action: https://codepen.io/anon/pen/agqPpW
Vous pouvez remplir les éléments <td /> avec des éléments <div /> et appliquer toute marge aux divs que vous aimez. Pour un espace visuel entre les lignes, vous pouvez utiliser une image d'arrière-plan répétée sur l'élément <tr />. (C’était la solution que je venais d’utiliser aujourd’hui, et elle semble fonctionner à la fois dans IE6 et FireFox 3, bien que je ne l’aie plus testée.)
De plus, si vous ne souhaitez pas modifier le code de votre serveur pour insérer des <div /> dans les <td />, vous pouvez utiliser jQuery (ou quelque chose de similaire) pour envelopper de manière dynamique le contenu de <td /> dans un <div/>, vous permettant d'appliquer le CSS comme vous le souhaitez.
Ou simplement ajouter un blanc avec la hauteur de la marge entre les lignes que vous souhaitez ajouter l'espacement