Th ne prenant pas toute la largeur d'un tableau

**Pgs** · 19/05/2017, 15h32

Bonjour,

J'ai un tableau de largeur 50%

table thead tr (dans le fichier css) fonctionne correctement car toute la largeur de l'entête du tableau est rouge.

Mais les th contenus dans ce tr ne couvrent pas toute la largeur du tableau.

Quelle propriété manque-t-il ?

Merci d'avance

HTML

Code :

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
<!doctype html>
<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Suivi</title>
	<link href="mystyles.css" rel="stylesheet" media="all" type="text/css">
 	</head>
	<body>
	<div>		
	<table>
	  <caption>Suivi</caption>
	  <thead>
		<tr><th style="text-align:left;">Action</th><th>Personne</th><th>Date</th><th>Situation</th><th>Commentaire</th></tr>
	  </thead>
	  <tbody><tr><td>Rappel</td><td>Laurent</td><td>04/04/2017</td><td>En cours</td><td></td></tr></tbody>
	</table>
	</div>
	</body>
</html>

CSS

Code :

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
 
select{
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
}
 
input {
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
}
 
table {
  width:50%;
  table-layout: fixed;
  border-collapse: collapse;
}
 
table caption {
  font-size:1.4rem;
  color:#ffffff;
  background-color: #5d625c;
 /* caption-side: bottom; // top|bottom|initial|inherit; */
}
 
table tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
}
 
table thead tr {
  display: block;
  background-color:red;
  position: relative;
  width:100%;
}
 
 
table tbody tr:nth-child(odd) {
  background-color: #d6d3ce;
  border-bottom:1px solid #ccc;
  color:#444;
}
table tbody tr:nth-child(even) {
  background-color: #c6c3bd;
  border-bottom:1px solid #ccc;
  color:#444;
}
 
table tbody tr:hover:nth-child(odd) {
  background-color: #999690;
  color:#ffffff;
  cursor:pointer;
}
 
table tbody tr:hover:nth-child(even) {
  background-color: #999690;
  color:#ffffff;
  cursor:pointer;
}
 
table th {
  background-color:#999690;
  color:#fff;
border:1px solid black;
padding:0;
margin:0;
height:25px;
}
 
table tfoot td {
  color:#fff;
  background-color:#999690;
  border-top:1px solid #5d625c;
  border-bottom:1px solid #5d625c;
}
 
table td {
	border:1px solid black;
}
 
table td:nth-child(2) {
  text-align:center;
}
table td:nth-child(3) {
  text-align:center;
}
table td:nth-child(4) {
  text-align:center;
}

**a.brice** · 19/05/2017, 21h05

tu pourrais envoyer ce que ton code affiche?
bonsoir/bonjour

**Pgs** · 19/05/2017, 23h14

Alors que d'habitude, les TH et les TD remplissent bien les TR, il sont maintenant ajustés à leur contenu :

Nom : Tab.png
Affichages : 230
Taille : 20,9 Ko

Th ne prenant pas toute la largeur d'un tableau

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager