Tableau avec scrollbar

**apdf1** · 16/08/2019, 13h53

Bonjour,
J'ai un tableau qui à une largeur de 960 px et j'aimerai que sa hauteur se limite à 450px.
Je cherche la façon de mettre une scrollbar avec overflow:auto; olu autre je n'y arrive pas?

Je joint mon code:

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
 <style>
    
       body{
           background: #000;
           color: #fff;
       }
       .tab{
           width: 960px;
           height: 450px;
       }
       
       .tab th{background: #6f7376;
           
           height: 50px;
       }
    </style>
 
    </head>    
    <body>
 
        <table border="1" class="tab">
 
<th colspan="3" style="color:chartreuse;"> Ain (5)</th> 
 
            <tr><td style="width:320px;">donnée 1</td><td style="width:320px;">donnée 2</td><td style="width:320px;">donnée 3</td></tr>          
 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
 
<th colspan="3" style="color:chartreuse;"> Allier (3)</th>
 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
 
<th colspan="3" style="color:chartreuse;"> Ardèche (3)</th>
 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
 
<th colspan="3" style="color:chartreuse;"> Cantal (2)</th>
 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr>
 
<th colspan="3" style="color:chartreuse;"> Drôme (4)</th>
 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr>
 
<th colspan="3" style="color:chartreuse;"> Haute-Loire (2)</th>
 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
 
<th colspan="3" style="color:chartreuse;"> Haute-Savoie (6)</th>
 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr>
 
<th colspan="3" style="color:chartreuse;"> Isère (10)</th>
 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr>
 
<th colspan="3" style="color:chartreuse;"> Loire (6)</th>
 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
 
<th colspan="3" style="color:chartreuse;"> Puy-de-Dôme (5)</th>
 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
 
<th colspan="3" style="color:chartreuse;"> Rhône (14)</th>
 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr>
 
<th colspan="3" style="color:chartreuse;"> Savoie (4)</th>
 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
 
          </table>

Je vous remercie de votre aide

Max

Invité · 16/08/2019, 14h05

Bonjour,

il faut mettre une <div> autour, et lui appliquer le overflow.

Code css :

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

1
2
3
4
5
6
7
8
div {
  width: 960px;
  height: 450px;
  overflow:auto;
}
.tab{
  width: 100%;
}

**apdf1** · 16/08/2019, 14h28

Bonjour

Oui j'ai bien mis la div autour mais rien à changer ou alors ...?

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
 <style>
    
       body{
           background: #000;
           color: #fff;
       }
 
       .tab th{background: #6f7376;
           
           height: 50px;
       }
         div #tab {
  width: 960px;
  height: 450px;
  overflow:auto;
}
.tab{
  width: 100%;
} 
    </style>
 
    </head>    
    <body>
 
    <div id="tab">
        <table border="1" class="tab">
 
<th colspan="3" style="color:chartreuse;"> Ain (5)</th> 
 
            <tr><td style="width:320px;">donnée 1</td><td style="width:320px;">donnée 2</td><td style="width:320px;">donnée 3</td></tr>          
 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
 
<th colspan="3" style="color:chartreuse;"> Allier (3)</th>
 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
 
<th colspan="3" style="color:chartreuse;"> Ardèche (3)</th>
 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
 
<th colspan="3" style="color:chartreuse;"> Cantal (2)</th>
 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr>
 
<th colspan="3" style="color:chartreuse;"> Drôme (4)</th>
 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr>
 
<th colspan="3" style="color:chartreuse;"> Haute-Loire (2)</th>
 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
 
<th colspan="3" style="color:chartreuse;"> Haute-Savoie (6)</th>
 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr>
 
<th colspan="3" style="color:chartreuse;"> Isère (10)</th>
 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr>
 
<th colspan="3" style="color:chartreuse;"> Loire (6)</th>
 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
 
<th colspan="3" style="color:chartreuse;"> Puy-de-Dôme (5)</th>
 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
 
<th colspan="3" style="color:chartreuse;"> Rhône (14)</th>
 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr>
 
<th colspan="3" style="color:chartreuse;"> Savoie (4)</th>
 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
            <tr><td>donnée 1</td><td>donnée 2</td><td>donnée 3</td></tr> 
 
          </table>
    </div>

**apdf1** · 16/08/2019, 14h32

Re,

Autant pour moi j'avais fait une erreur

Merci

Max

Tableau avec scrollbar

Tableau en CSS

Discussions similaires

Partager

Partager