Comment coller la barre de scroll à ma table ?
Bonjour,
Je tourne en rond depuis pas mal de temps et je n'arrive pas à définir correctement une table. Avec l'exemple ci-dessous, la barre de scroll est complètement à droite de la table.
Ceci n'est qu'un exemple mais les tailles de la 2ième et 3ième colonnes peuvent varier en fonction de leur contenu.
Ici j'ai utilisé des titre de films comme exemple, mais la question se pose d'une façon générale dans mon application.
Dois-je définir une largeur maximum ? (width ?, maxlength ?) Quitte à avoir le titre sur 2 lignes ?
Merci d'avance pour toutes suggestions.
Gérard
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
| <html lang="FR"><head>
<title>Test Table</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Cache-Control" content="no-store">
<style>
#interpretes
{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: auto;
white-space: nowrap;
table-layout: auto;
background-color: #ffffE0;
}
#interpretes td, #interpretes th
{
font-size: 1em;
border: 1px solid #98bf21;
padding: 3px 7px 2px 7px;
background-color: #EAF2D3;
}
#interpretes th
{
font-size: 1.1em;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #A7C942;
color: #ffffff;
}
#interpretes td
{
color: #000000;
background-color: #EAF2D3;
}
</style>
</head>
<body><h1>
<div style="height: 150px; overflow: auto;">
<table id="interpretes" >
<tr >
<th >Année</td>
<th >Titre </td>
<th ">Métiers</td>
</tr>
<tr>
<td rowspan="2">2010</td>
<td >Rien à déclarer</td>
<td >Interprête<br></td>
</tr>
<tr>
<td >Immortel (L')</td>
<td ">Interprête<br></td>
</tr>
<tr>
<td >2009</td>
<td >Affaire Farewell (L')</td>
<td >Interprête<br></td>
</tr>
<tr>
<td >2006</td>
<td " onclick="lireFilm(4019);">Doublure (La)</td>
<td >Interprête<br></td>
</tr>
<tr>
<td >2005</td>
<td >Il ne faut jurer... de rien !</td>
<td >Interprête<br></td>
</tr>
<tr>
<td rowspan="2">2000</td>
<td >Une pour toutes</td>
<td >Interprête<br></td>
</tr>
<tr>
<td >Acteurs (Les)</td>
<td ">Interprête<br></td>
</tr>
<tr>
<td rowspan="2">1998</td>
<td >Enfants du marais (Les)</td>
<td >Interprête<br></td>
</tr>
<tr>
<td >1 chance sur 2</td>
<td ">Interprête<br></td>
</tr>
<tr>
<td rowspan="2">1997</td>
<td >Cousin (Le)</td>
<td >Interprête<br></td>
</tr>
<tr>
<td >Tenue correcte exigée</td>
<td ">Interprête<br></td>
</tr>
<tr>
<td >1996</td>
<td " onclick="lireFilm(2507);">Ridicule</td>
<td >Interprête<br></td>
</tr>
</table>
</div>
</h1></body></html |
