Salut -
Je veux reproduire le tableau sur l'image ci-dessous. Mais j'ai quelques problèmes pour le reproduire exactement
Voici ce que j'ai essayé :
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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40 <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <table cellspacing="0" style="height: 340px;"> <thead> <tr> <th>Titre1</th> <th>Titre2</th> <th>Titre3</th> <th>Titre4</th> </tr> </thead> <tbody > <tr> <td>X2</td> <td>X1</td> <td>X3</td> <td>X4</td> </tr> <tr> <td>Y2</td> <td>Y1</td> <td>Y3</td> <td>Y4</td> </tr> <tr> <td>Z2</td> <td>Z1</td> <td>Z3</td> <td>Z4</td> </tr> </tbody> </table> </body> </html>
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13 thead tr th{ border : 1px solid black; } td{ border-left : 1px solid black; border-right : 1px solid black; } table { width: 100%; border: 1px solid black; }
Voici les difficultés:
1- à l'image, la taille du tableau est fixée et les lignes sont rapprochées - pourtant dans mon code les lignes sont espacées pour cooccuper toute la longueur du tableau
je voudrais que quelque soit le nombre de lignes, les lignes puissent être rapprochées - pas de bordure entre les lignes du tbody et la taille du tableau toujours fixée - dans ce cas il y aurait généralement un espace entre la dernière ligne et la fin du tableau.
merci.
Partager