Comment coller la barre de scroll à ma table ?

**GérardMartinelli** · 26/11/2014, 15h55

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 :

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

**valaendra** · 26/11/2014, 16h04

Bonjour,

Pas besoin de fixer de taille :

Code :

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

<div style="height: 150px;  overflow: auto; display:inline-block; padding:20px;">

**GérardMartinelli** · 27/11/2014, 09h42

Merci beaucoup Valaendra, ta solution marche très bien. Toutefois j'ai un petit problème, qui j'en suis sûr pourrait être corrigé facilement :

La barre de scroll déborde légèrement en haut de la table au lieu d'être au même niveau (en bas elle est au même niveau). Je pense que cela à avoir avec le padding, mais si je le supprime, la barre est bien au même niveau, mais à ce moment les colonnes sont rapetissées et une barre de scrooll horizontale apparait.

Je te remet mon code complet si tu veux tester.

Note : J'ai fait le test avec FireFox et IE et j'obtiens le même résultat.

Merci encore pour ton aide.

Gérard

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
100
101
102
103
104
105
106
107
108
109
110
 
<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; display:inline-block; padding:20px;">  
<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 </td>
        </tr>
        <tr> 
                <td  >Immortel (L')</td>
                <td  ">Interprête </td>
      	</tr>
      	<tr>
	      	<td  >2009</td> 
	      	<td >Affaire Farewell (L')</td>
	      	<td  >Interprête </td>
     	</tr>
	<tr>
		<td  >2006</td> 
		<td  " onclick="lireFilm(4019);">Doublure (La)</td>
                <td  >Interprête </td>
        </tr>
        <tr>
                <td  >2005</td>
                <td   >Il ne faut jurer... de rien !</td>
                <td  >Interprête </td>
        </tr>
        <tr>
                <td   rowspan="2">2000</td>
                <td  >Une pour toutes</td>
                <td  >Interprête </td>
        </tr>
        <tr> 
                <td  >Acteurs (Les)</td>
                <td  ">Interprête </td>
	</tr>
	<tr>
		<td   rowspan="2">1998</td>
		<td  >Enfants du marais (Les)</td>
		<td  >Interprête </td>
	</tr>
	<tr> 
		<td  >1 chance sur 2</td>
		<td  ">Interprête </td>
        </tr>
        <tr>
                <td   rowspan="2">1997</td>
                <td  >Cousin (Le)</td>
                <td  >Interprête </td>
        </tr>
        <tr> 
                <td  >Tenue correcte exigée</td>
                <td  ">Interprête </td>
	</tr>
	<tr>
		<td  >1996</td> 
		<td  " onclick="lireFilm(2507);">Ridicule</td>
		<td  >Interprête </td>
	</tr>
 	</table>
</div>
 
 </h1></body></html>

**valaendra** · 27/11/2014, 11h10

Bonjour,

Tu peux jouer avec les valeurs du padding : <div style="height: 150px; overflow: auto; display:inline-block; padding: 0 20px;">Dans ce cas là, le padding est de 0 en haut et en bas ; et ; de 20px à droite et à gauche.

J'aurais également pu écrire : <div style="height: 150px; overflow: auto; display:inline-block; padding: 0 20px 0 20px;">Ce qui revient au même

Tu peux également voir du coté des propriétés overflow-y et overflow-x pour gérer les barres verticales et horizontales séparément.

**GérardMartinelli** · 27/11/2014, 12h57

Ca marche impec. Merci encore pour cette aide rapide.

Gérard

Comment coller la barre de scroll à ma table ?

HTML

Discussions similaires

Partager

Partager