Mise en forme d'un tableau en HTML CSS

**Toogda** · 23/04/2021, 22h46

Salut -
Je veux reproduire le tableau sur l'image ci-dessous. Mais j'ai quelques problèmes pour le reproduire exactement
Nom : ask - developpez.PNG
Affichages : 141
Taille : 6,9 Ko

Nom : ask - developpez.PNG
Affichages : 141
Taille : 6,9 Ko

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.

**NoSmoking** · 24/04/2021, 17h34

Bonjour,

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 :

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

1
2
3
tr {
  display: flex;
}

et tes <th> et tes <td> à la même largeur

Code :

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

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

ou

Code :

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

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> !

**laurentSc** · 25/04/2021, 12h11

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

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
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 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
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...

Mise en forme d'un tableau en HTML CSS

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager