Mise en forme d'un tableau en HTML CSS

Version imprimable

1 pièce(s) jointe(s)

Salut -
Je veux reproduire le tableau sur l'image ci-dessous. Mais j'ai quelques problèmes pour le reproduire exactement
Pièce jointe 596478

Voici ce que j'ai essayé :

Code:

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:

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.

24/04/2021, 17h34
NoSmoking
Bonjour,

Citation:

pourtant dans mon code les lignes sont espacées pour cooccuper toute la longueur du tableau

c'est le comportement normal du rendu des <table>.

Si tu veux obtenir un autre rendu il va te falloir passer par autre choses en utilisant le mode de rendu display:flex par exemple.

Essaie déjà simplement en mettant tes <tr> en display:flex :
Code:

1 2 3 tr { display: flex; }
et tes <th> et tes <td> à la même largeur
Code:

1 2 3 th, td { flex: 1 0 auto; }
ou
Code:

1 2 3 4 th, td { flex: 1 0 25%; box-sizing: border-box; }
après ce posera la question du maintien d'un élément de type <table> !

Et quid, du mode CSS tabulaire (table, table-row, table-cell,...) ?

J'ai essayé :

Code:

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
    <!doctype html>
    <html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Titre de la page</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <!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;">-->
        <div class="table">
            <div class="row">
                <div class="cell">
                    <div class="table">
                        <div class="rowhead">
                            <div class="cell">Titre1</div>
                        </div>
                        <div class="row">
                            <div class="cell">X1</div>
                        </div>
                        <div class="row">
                            <div class="cell">Y1</div>
                        </div>
                        <div class="row">
                            <div class="cell">Z1</div>
                        </div>
                        <div class="row">
                            <div class="cell"></div>
                        </div>
                        <div class="row">
                            <div class="cell"></div>
                        </div>
                        <div class="row">
                            <div class="cell"></div>
                        </div>
                        <div class="row">
                            <div class="cell"></div>
                        </div>
                        <div class="row">
                            <div class="cell"></div>
                        </div>
                        <div class="row">
                            <div class="cell"></div>
                        </div>
                    </div>
                </div>
 
                <div class="cell">
                    <div class="table">
                        <div class="rowhead">
                            <div class="cell">Titre2</div>
                        </div>
                        <div class="row">
                            <div class="cell">X2</div>
                        </div>
                        <div class="row">
                            <div class="cell">Y2</div>
                        </div>
                        <div class="row">
                            <div class="cell">Z2</div>
                        </div>
                    </div>
                </div>
 
                <div class="cell">
                    <div class="table">
                        <div class="rowhead">
                            <div class="cell">Titre3</div>
                        </div>
                        <div class="row">
                            <div class="cell">X3</div>
                        </div>
                        <div class="row">
                            <div class="cell">Y3</div>
                        </div>
                        <div class="row">
                            <div class="cell">Z3</div>
                        </div>
                    </div>
                </div>
 
                <div class="cell">
                    <div class="table">
                        <div class="rowhead">
                            <div class="cell">Titre4</div>
                        </div>
                        <div class="row">
                            <div class="cell">X4</div>
                        </div>
                        <div class="row">
                            <div class="cell">Y4</div>
                        </div>
                        <div class="row">
                            <div class="cell">Z4</div>
                        </div>
                    </div>
                </div>
 
 
            </div>
 
 
 
        </div>
 
    </body>
    </html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.table {
    display:table;
    /*table-layout: fixed;*/
    width:500px;
    height:340px;
    border:solid;
}
 
.row{
    display:table-row;
    vertical-align: top;
    height:10px;
}
 
.rowhead{
    display:table-header-group;
    vertical-align: top;
    height:10px;
}
 
.cell{
    display:table-cell;
    width:50px;
}

Mais le résultat est moyen : pour que les lignes soient placées vers le haut et n'occupent toute la hauteur du tableau, obligé de rajouter des lignes vides (fait que sur la première colonne).
Je me demande pourquoi la règle height:10px; dans la classe row n'est pas prise en compte...