Table-layout:fixed non pris en compte

**Pgs** · 02/07/2019, 10h10

Bonjour,
Dans le tableau suivant je n’arrive pas, pour chaque colonne, à avoir des td de même largeur que le th.
Pourtant, j’utilise table-layout:fixed.
Merci pour toute aide.

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
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
html, body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
}
table {
display: block;
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
thead,tbody {
display: block;
overflow-y: scroll;
}
tr {
width: 100%;
}
th, td {border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead><tr>
<th style="width: 10%;">XXXXX XXXX</th>
<th style="width: 14%;">XXXX XXXXX</th>
<th style="width: 14%;">XXXXX</th>
<th style="width: 10%;">XXXX XXX XXXXX / XXXXXXX</th>
<th style="width: 5%;">XXXXXXXXXXXXXXXX XXXXXX</th>
<th style="width: 5%;">XXXXX XXXX</th>
<th style="width: 5%;">XXXX XXXXXXX XXXXX</th>
<th style="width: 6%;">XXXX XXXX XXXXX XXXX XXXXX</th>
<th style="width: 6%;">XXXX XXXX XXXXXX</th>
<th style="width: 15%;">XXXXX XXXX - XXXXXX XXXX</th>
<th style="width: 15%;">XXXX XXXXXX XXXXXX</th>
</tr></thead>
<tbody><tr>
<td style="width: 10%;">YYYYY YYYYYYY YYYY YYYY YYYYY YYYY YYYYYY</td>
<td style="width: 14%;"></td>
<td style="width: 14%;">YYYY YYYY YY YY YY YY YY</td>
<td style="width: 10%;">YYYYYY YYY YYYYYY YYYYYY</td>
<td style="width: 5%;">Y</td>
<td style="width: 5%;"></td>
<td style="width: 5%;">YYYYY YYYYYY YYYYYY YYYYYYY</td>
<td style="width: 6%;">YY</td>
<td style="width: 6%;">YYY YYYY YYYYY YYYY YYYYY</td>
<td style="width: 15%;"></td>
<td style="width: 15%;"></td>
</tr></tbody>
</table>
</body>
</html>

Invité · 02/07/2019, 10h50

Bonjour,

supprime les display: block; ...

(mais d'où t'est venue cette idée saugrenue ??

)

**Pgs** · 02/07/2019, 14h22

Merci pour ta réponse.

Je pensais que les display:block étaient la bonne méthode pour figer les titres du tableau dans thead et permettre un scroll-y dans tbody.

D'ailleurs, si j’enlève ces display:block, cela règle mon problème de largeur de colonnes mais je perds le scroll-y.

Invité · 02/07/2019, 15h22

"tableau html à entête fixe"

Pourtant, TU avais posé LA MEME question, en on t'avait répondu... en 2017 !!

https://www.developpez.net/forums/d1...d-code-propre/
(N.B. OK : vu pour les display:block; DANS CE CAS -> alors que tu N'AS PAS parlé d'"entête fixe" dans ton 1er message... )

Tu pourras néanmoins trouvé des codes plus performant... en cherchant un peu...

Table-layout:fixed non pris en compte

CSS

Vue hybride

Discussions similaires

Partager

Partager