Discussion :

[moimp]

Bonjour à tous,

Je n'arrive pas à décoller (éloigner) une ligne de tableau de la précédente.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
.tr2
{
	height:30px;
	border-spacing:15px;
	border-top:1px solid;
	background-color:yellow;
	color:maroon;
	font-size:1.2rem;
	font-style:italic;
	font-weight:bold;
	vertical-align:bottom;
}

[Doksuri]

padding-top ou margin-top

[moimp]

Non, ça ne fonctionne pas sur les lignes (<tr>) de tableaux. Les lignes de style apparaissent dans la console mais sont sans effet sur le tableau.

[NoSmoking]

Bonjour,
la classe .tr2 est appliquée sur quel élément de la <table> ?

Si c'est la <table> elle même il n'y a que border-spacing qui agit sur « l'éloignement » de toutes les cellules, verticalement comme horizontalement.

Tu peux néanmoins jouer avec un padding appliqué aux cellules.

Autre solution, dite « gros bidouillage », passer tes <tr> en display:block et là tu peux leur appliquer une marge, attention il te faudra dans ce cas définir les largeurs de tes <td>, mais bon ...

[moimp]

@NoSmoking
Comme son nom l'indique, la classe .tr2 s'applique aux lignes donc aux balises <tr>. Il n'y a que les lignes qui ont cette classe qui doivent être séparées des précédentes. Sachant que ces lignes ne comportent qu'une cellule (colspan='6')

[NoSmoking]

Comme son nom l'indique, la classe .tr2 s'applique aux lignes donc aux balises <tr>.

on en a vu tellement sur le forum que l'on préfère faire préciser

Sachant que ces lignes ne comportent qu'une cellule (colspan='6')

c'est une information pertinente et je me pose la question si ta construction HTML est judicieuse mais bon ..!

Tu peux jouer avec la largeur des border-top pour « éloigner » les éléments, un exemple simple.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
table {
  border-collapse: separate;
  border-spacing: 0;
}
td {
  height: 1.5em;
  padding: .25em;
  border: 1px solid #888;
  border-width: 0 1px 1px 0;
}
td:not([colspan]):first-child {
  border-left-width: 1px;
}
[colspan] {
  height: 3em;
  border-width: 10px 0 1px;
  border-top-color: #FFF;
  font-weight: 700;
  background-color: #CDE;
}

teste avec le HTML suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table>
  <tbody>
    <tr><td colspan="5">Colspan 1</td></tr>
    <tr><td>C1 - L1</td><td>C2 - L1</td><td>C3 - L1</td><td>C4 - L1</td><td>C5 - L1</td></tr>
    <tr><td>C1 - L2</td><td>C2 - L2</td><td>C3 - L2</td><td>C4 - L2</td><td>C5 - L2</td></tr>
    <tr><td>C1 - L3</td><td>C2 - L3</td><td>C3 - L3</td><td>C3 - L3</td><td>C5 - L3</td></tr>
    <tr><td colspan="5">Colspan 2</td></tr>
    <tr><td>C1 - L4</td><td>C2 - L4</td><td>C3 - L4</td><td>C4 - L4</td><td>C5 - L4</td></tr>
    <tr><td>C1 - L5</td><td>C2 - L5</td><td>C3 - L5</td><td>C4 - L5</td><td>C5 - L5</td></tr>
    <tr><td colspan="5">Colspan 3</td></tr>
    <tr><td>C1 - L6</td><td>C2 - L6</td><td>C3 - L6</td><td>C4 - L6</td><td>C5 - L6</td></tr>
    <tr><td>C1 - L7</td><td>C2 - L7</td><td>C3 - L7</td><td>C4 - L7</td><td>C5 - L7</td></tr>
    <tr><td>C1 - L8</td><td>C2 - L8</td><td>C3 - L8</td><td>C4 - L8</td><td>C5 - L8</td></tr>
  </tbody>
</table>

Tu pourrais également simuler l'« éloignement » en utilisant un background: linear-gradient(...).