Tableau entete et pied fixe mais largeur colonne variable

**Pelote2012** · 10/10/2013, 11h08

Bonjour

Toute ma question est dans le titre. Je cherche à faire un tableau avec entete et pied fixe. Mais le body scrollable.
J'ai trouvé plein de truc sur Google mais je n'arrive à rien mettre en forme

Voici 2 essais infructueux :

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
 
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Table.aspx.vb" Inherits="Jquery.Table" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="/script/jquery-1.9.0.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="CSS/table.css" />
    <script type="text/javascript">
        $(function () {
 
            var str = '<table id="iframeTab"><thead><tr><th>th1</th><th>th2</th><th>th3</th></tr></thead>';
            str += '<tfoot><tr><td>tf1</td><td>tf2</td><td>tf3</td></tr></tfoot><tbody>';
            str += '<tr><td>td1</td><td>td2</td><td>td3</td></tr>';
            str += '<tr><td>td1</td><td>td2</td><td>td3</td></tr>';
            str += '<tr><td>td1</td><td>td2</td><td>td3</td></tr>';
            str += '<tr><td>td1</td><td>td2</td><td>td3</td></tr>';
            str += '<tr><td>td1</td><td>td2</td><td>td3</td></tr>';
            str += '<tr><td>td1</td><td>td2</td><td>td3</td></tr>';
            str += '<tr><td>td1</td><td>td2</td><td>td3</td></tr>';
            str += '<tr><td>td1</td><td>td2</td><td>td3</td></tr>';
            str += '<tr><td>td1</td><td>td2</td><td>td3</td></tr>';
            str += '<tr><td>td1</td><td>td2</td><td>td3</td></tr>';
            str += '<tr><td>td1</td><td>td2</td><td>td3</td></tr>';
            str += '<tr><td>td1</td><td>td2</td><td>td3</td></tr>';
            str += '</tbody></table>';
            $('#myIframe').contents().find('body').html(str);
 
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="scrollable-table-wrapper">
            <table id="TestTable">
                <thead>
                    <tr>
                        <th>
                            th1
                        </th>
                        <th>
                            th2
                        </th>
                        <th>
                            th3
                        </th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <td>
                            tf1
                        </td>
                        <td>
                            tf2
                        </td>
                        <td>
                            tf3
                        </td>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <td>
                            td1
                        </td>
                        <td>
                            td2
                        </td>
                        <td>
                            td3
                        </td>
                    </tr>
                    <tr>
                        <td>
                            td1
                        </td>
                        <td>
                            td2
                        </td>
                        <td>
                            td3
                        </td>
                    </tr>
                    <tr>
                        <td>
                            td1
                        </td>
                        <td>
                            td2
                        </td>
                        <td>
                            td3
                        </td>
                    </tr>
                    <tr>
                        <td>
                            td1
                        </td>
                        <td>
                            td2
                        </td>
                        <td>
                            td3
                        </td>
                    </tr>
                    <tr>
                        <td>
                            td1
                        </td>
                        <td>
                            td2
                        </td>
                        <td>
                            td3
                        </td>
                    </tr>
                    <tr>
                        <td>
                            td1
                        </td>
                        <td>
                            td2
                        </td>
                        <td>
                            td3
                        </td>
                    </tr>
                    <tr>
                        <td>
                            td1
                        </td>
                        <td>
                            td2
                        </td>
                        <td>
                            td3
                        </td>
                    </tr>
                    <tr>
                        <td>
                            td1
                        </td>
                        <td>
                            td2
                        </td>
                        <td>
                            td3
                        </td>
                    </tr>
                    <tr>
                        <td>
                            td1
                        </td>
                        <td>
                            td2
                        </td>
                        <td>
                            td3
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <iframe src="about:blank" width="300" height="250" scrolling="auto" id="myIframe">
    </iframe>
    </form>
</body>
</html>

Code css :

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
 
body {
    padding: 22px 0;
}
table {
    border-collapse: collapse;
    max-width: 100%;
    position: relative;
    margin: 0;
}
thead {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
tfoot {
    position: fixed;
    bottom: 0;
    left: 0;
}
 
thead th, tfoot th {
    background: #ddd;
}
td, th {
    border: 1px #ccc solid;
    padding: 1px;
    width: 40px;
}
 
.scrollable-table-wrapper
{
    height:50px;
    overflow:auto;
}

Merci de votre aide

**Pelote2012** · 10/10/2013, 13h23

Je progresse, voici un code venant de SpaceFrog que j'ai réadapté à mes besoin. Au moin là il n'y a pas de bug.

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
 
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="table3.aspx.vb" Inherits="Jquery.table3" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        .general
        {
            position: absolute;
            overflow: hidden;
            width: 400px;
            height: 250px;
            border: 1px solid;
        }
        
        .entete_l
        {
            position: absolute;
            left: 0px;
            top: 0px;
            height: 50px;
            background-color: #99CCCC;
        }
                
        .donnees
        {
            position: absolute;
            overflow: scroll;
            left: 0px;
            top: 50px;
            width: 400px;
            height: 150px;
            background-color: #9999CC;
        }
        
         .pied
        {
            position: absolute;
            left: 0px;
            bottom: 0px;
            height: 50px;
            background-color: #99CCCC;
        }
 
        table
        {
            border-collapse: collapse;
        }
    </style>
    <script type="text/javascript">
        function doOnScroll(mondiv) {
            document.getElementById("ligne").style.left = (-mondiv.scrollLeft) + "px"
            document.getElementById("pied").style.left = (-mondiv.scrollLeft) + "px"
        }
    </script>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br />
    <div class="general">
        <div style="z-index: 10;" id="ligne" class="entete_l">
            <table width="500" height="50" border="1">
                <tr>
                    <td width="100">
                        Alpha
                    </td>
                    <td width="100">
                        Beta
                    </td>
                    <td width="100">
                        Gamma
                    </td>
                    <td width="100">
                        Omega
                    </td>
                    <td width="100">
                        Upsilon
                    </td>
                </tr>
            </table>
        </div>
 
        <div style="z-index: 10;" class="donnees" onscroll="doOnScroll(this);">
            <table width="500" height="200" border="1">
                <tr height="50">
                    <td width="100">
                        1
                    </td>
                    <td width="100">
                        2
                    </td>
                    <td width="100">
                        3
                    </td>
                    <td width="100">
                        4
                    </td>
                    <td width="100">
                        5
                    </td>
                </tr>
                <tr height="50">
                    <td width="100">
                        1
                    </td>
                    <td width="100">
                        2
                    </td>
                    <td width="100">
                        3
                    </td>
                    <td width="100">
                        4
                    </td>
                    <td width="100">
                        5
                    </td>
                </tr>
                <tr height="50">
                    <td width="100">
                        1
                    </td>
                    <td width="100">
                        2
                    </td>
                    <td width="100">
                        3
                    </td>
                    <td width="100">
                        4
                    </td>
                    <td width="100">
                        5
                    </td>
                </tr>
                <tr height="50">
                    <td width="100">
                        1
                    </td>
                    <td width="100">
                        2
                    </td>
                    <td width="100">
                        3
                    </td>
                    <td width="100">
                        4
                    </td>
                    <td width="100">
                        5
                    </td>
                </tr>
            </table>
        </div>
 
        <div style="z-index: 10;" id="pied" class="pied">
            <table width="500" height="50" border="1">
                <tr>
                    <td width="100">
                        a
                    </td>
                    <td width="100">
                        b
                    </td>
                    <td width="100">
                        g
                    </td>
                    <td width="100">
                        o
                    </td>
                    <td width="100">
                        y
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

Là ou je bloque c'est pour mettre le scroll horizontal dans le footer

**rodolphebrd** · 10/10/2013, 14h23

Salut,

ne veux-tu pas l'entête et le footer fixe avec le contenu scrollable ?

**Pelote2012** · 10/10/2013, 15h18

si, et mon dernier ex, va dans ce sens. Bah ce que je vois du moins à l'écran.

Voici une modif du style

Code css :

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
 
<style type="text/css">
        .general
        {
            position: absolute;
            overflow: scroll;
            overflow-y: hidden;
            width: 400px;
            height: 250px;
            border: 1px solid;
        }
 
        .entete_l
        {
            position: absolute;
            left: 0px;
            top: 0px;
            height: 50px;
            background-color: #99CCCC;
        }
 
        .pied
        {
            position: absolute;
            left: 0px;
            bottom: 0px;
            height: 50px;
            background-color: #99CCCC;
        }
 
        .donnees
        {
            position: absolute;
            overflow: scroll;
            overflow-x: hidden;
            left: 0px;
            top: 50px;
            width: 400px;
            height: 150px;
            background-color: #9999CC;
        }
 
         table
        {
            border-collapse: collapse;
        }
    </style>

Le scroll horizontal est bon , mais là c'est le vertical qui ne va pas, quand je scrolle, la barre reste en plein milieu du tableau

**Pelote2012** · 10/10/2013, 16h59

Meric à Spacefrog

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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="table3.aspx.vb" Inherits="Jquery.table3" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        .general
        {
            position: absolute;
            overflow: hidden;
            width: 400px;
            height: 250px;
            border: 1px solid;
        }
 
        .entete_l
        {
            position: absolute;
            left: 0px;
            top: 0px;
            height: 50px;
            background-color: #99CCCC;
        }
 
        .Cellule
        {
            width:100px;
         }
 
        .pied
        {
            position: absolute;
            overflow: scroll;
            left: 0px;
            bottom: 0px;
            height: 50px;
            background-color: #99CCCC;
            width: 400px;
        }
 
        .donnees
        {
            position: absolute;
            overflow: scroll;
            overflow-x: hidden;
            left: 0px;
            top: 50px;
            width: 400px;
            height: 150px;
            background-color: #9999CC;
        }
 
         table
        {
            border-collapse: collapse;
        }
    </style>
    <script type="text/javascript">
        function doOnScroll(mondiv) {
            document.getElementById("ligne").style.left = (-mondiv.scrollLeft) + "px"
            document.getElementById("datas").scrollLeft = (mondiv.scrollLeft)
        }
    </script>
</head>
<body>
 
    <div class="general">
        <div style="z-index: 10;" id="ligne" class="entete_l">
            <table width="500" height="50" border="1">
                <tr>
                    <td class="Cellule">
                        Alpha
                    </td>
                    <td class="Cellule">
                        Beta
                    </td>
                    <td class="Cellule">
                        Gamma
                    </td>
                    <td class="Cellule">
                        Omega
                    </td>
                    <td class="Cellule">
                        Upsilon
                    </td>
                </tr>
            </table>
        </div>
        <div style="z-index: 10;" class="donnees" id="datas">
            <table width="500" height="200" border="1">
                <tr height="50">
                    <td class="Cellule">
                        1
                    </td>
                    <td class="Cellule">
                        2
                    </td>
                    <td class="Cellule">
                        3
                    </td>
                    <td class="Cellule">
                        4
                    </td>
                    <td class="Cellule">
                        5
                    </td>
                </tr>
                <tr height="50">
                    <td class="Cellule">
                        1
                    </td>
                    <td class="Cellule">
                        2
                    </td>
                    <td class="Cellule">
                        3
                    </td>
                    <td class="Cellule">
                        4
                    </td>
                    <td class="Cellule">
                        5
                    </td>
                </tr>
                <tr height="50">
                    <td class="Cellule">
                        1
                    </td>
                    <td class="Cellule">
                        2
                    </td>
                    <td class="Cellule">
                        3
                    </td>
                    <td class="Cellule">
                        4
                    </td>
                    <td class="Cellule">
                        5
                    </td>
                </tr>
                <tr height="50">
                    <td class="Cellule">
                        1
                    </td>
                    <td class="Cellule">
                        2
                    </td>
                    <td class="Cellule">
                        3
                    </td>
                    <td class="Cellule">
                        4
                    </td>
                    <td class="Cellule">
                        5
                    </td>
                </tr>
            </table>
        </div>
        <div style="z-index: 10;" class="pied" onscroll="doOnScroll(this);">
            <table width="500" height="50" border="1">
                <tr>
                    <td class="Cellule">
                        a
                    </td>
                    <td class="Cellule">
                        b
                    </td>
                    <td class="Cellule">
                        g
                    </td>
                    <td class="Cellule">
                        o
                    </td>
                    <td class="Cellule">
                        y
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
 
</html>

**rodolphebrd** · 10/10/2013, 17h15

Mais le scroll horizontale agit sur le contenu + le footer + le header

**Pelote2012** · 10/10/2013, 18h16

oui. Car mon tableau est plus large.

Ma réflexion se porte maintenant sur un autre souci

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
 
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="table3.aspx.vb" Inherits="Jquery.table3" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script src="/script/jquery-1.9.0.js" type="text/javascript"></script>
    <style type="text/css">
        .general
        {
            position: absolute;
            overflow: hidden;
            width: 400px;
            height: 250px;
            border: 1px solid;
        }
        
        .entete_l
        {
            overflow: hidden;
            position: absolute;
            width: 400px;
            left: 0px;
            top: 0px;
            height: 50px;
            background-color: #99CCCC;
        }
        
        .Cellule
        {
            width: 100px;
        }
        
        .pied
        {
            position: absolute;
            overflow: scroll;
            overflow-y: hidden;
            left: 0px;
            bottom: 0px;
            height: 50px;
            background-color: #99CCCC;
            width: 400px;
        }
        
        .donnees
        {
            position: absolute;
            overflow: scroll;
            overflow-x: hidden;
            left: 0px;
            top: 50px;
            width: 400px;
            height: 150px;
            background-color: #9999CC;
        }
        
        table
        {
            border-collapse: collapse;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            var hsb = getScrollBarWidth();
            $("#datas").css("padding-right", hsb + "px");
            $("#gene").css("padding-right", hsb + "px");
        });
 
        function getScrollBarWidth() {
            var $outer = $('<div>').css({ visibility: 'hidden', width: 100, overflow: 'scroll' }).appendTo('body'), widthWithScroll = $('<div>').css({ width: '100%' }).appendTo($outer).outerWidth();
            $outer.remove();
            return 100 - widthWithScroll;
        };
 
        function doOnScroll(mondiv) {
            document.getElementById("ligne").style.left = (-mondiv.scrollLeft) + "px"
            document.getElementById("datas").scrollLeft = (mondiv.scrollLeft)
 
 
        }
    </script>
</head>
<body>
    <div class="general" id="gene">
        <div style="z-index: 10;" id="ligne" class="entete_l">
            <table width="500" height="50" border="1">
                <tr>
                    <td class="Cellule">
                        Alpha
                    </td>
                    <td class="Cellule">
                        Beta
                    </td>
                    <td class="Cellule">
                        Gamma
                    </td>
                    <td class="Cellule">
                        Omega
                    </td>
                    <td class="Cellule">
                        Upsilon
                    </td>
                </tr>
            </table>
        </div>
        <div style="z-index: 10;" class="donnees" id="datas">
            <table width="500" height="200" border="1">
                <tr height="50">
                    <td class="Cellule">
                        1
                    </td>
                    <td class="Cellule">
                        2
                    </td>
                    <td class="Cellule">
                        3
                    </td>
                    <td class="Cellule">
                        4
                    </td>
                    <td class="Cellule">
                        5
                    </td>
                </tr>
                <tr height="50">
                    <td class="Cellule">
                        1
                    </td>
                    <td class="Cellule">
                        2
                    </td>
                    <td class="Cellule">
                        3
                    </td>
                    <td class="Cellule">
                        4
                    </td>
                    <td class="Cellule">
                        5
                    </td>
                </tr>
                <tr height="50">
                    <td class="Cellule">
                        1
                    </td>
                    <td class="Cellule">
                        2
                    </td>
                    <td class="Cellule">
                        3
                    </td>
                    <td class="Cellule">
                        4
                    </td>
                    <td class="Cellule">
                        5
                    </td>
                </tr>
                <tr height="50">
                    <td class="Cellule">
                        1
                    </td>
                    <td class="Cellule">
                        2
                    </td>
                    <td class="Cellule">
                        3
                    </td>
                    <td class="Cellule">
                        4
                    </td>
                    <td class="Cellule">
                        5
                    </td>
                </tr>
            </table>
        </div>
        <div style="z-index: 10;" class="pied" onscroll="doOnScroll(this);">
            <table width="500" height="50" border="1">
                <tr>
                    <td class="Cellule">
                        a
                    </td>
                    <td class="Cellule">
                        b
                    </td>
                    <td class="Cellule">
                        g
                    </td>
                    <td class="Cellule">
                        o
                    </td>
                    <td class="Cellule">
                        y
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

Je voudrait que ma scroll bar vertical semble être en dehors de mon tableau
la le problème est que mon header est incomplet
si je remplace le style

Code css :

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

1
2
3
4
5
6
7
8
 .entete_l
        {
            position: absolute;
            left: 0px;
            top: 0px;
            height: 50px;
            background-color: #99CCCC;
        }

l'entete passe au dessus du scroll...
quelqu'un a une idée

**rodolphebrd** · 10/10/2013, 18h29

Envoyé par BROWNY

Je voudrait que ma scroll bar vertical semble être en dehors de mon tableau

Que veux-tu exactement ?

**Pelote2012** · 14/10/2013, 20h42

Désolé, je n'ai pas pu me connecter avant.

En fait, si tu copies le code tu verra que pour le moment la scrollbar rogne les cases de données à droite.
En mettant padding-right j'arrive à arrêter le div des données et de pied correctement, mais le div du header passe dessus ma scroll bar.
Dans le 2nd exemple, mon header s'arrête bien au même niveau que les 2 autres div, mais en déplaçant le scroll horizontale, mon header est incomplet. Au lieu d'afficher les entêtes suivantes, j'ai des cases vides. Je comprends pourquoi, mais je n'arrive pas à résoudre le problème.

Peut-être que je m'y prend mal

**rodolphebrd** · 14/10/2013, 20h50

Veux-tu un tableau de ce type : http://www.imaputz.com/cssStuff/bigFourVersion.html

**Pelote2012** · 15/10/2013, 12h07

c'est bon j'ai trouvé.

L'idée qui m'est venu cette nuit

comme pour colorié les étoile des demande d'avis ... un div qui slide dans un autre div ...

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
 
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="table3.aspx.vb" Inherits="Jquery.table3" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script src="/script/jquery-1.9.0.js" type="text/javascript"></script>
    <style type="text/css">
        .general
        {
            position: absolute;
            overflow: hidden;
            width: 400px;
            height: 250px;
            border: 1px solid;
        }
        
        .entete_s
        {
            overflow:hidden;
            position: absolute;
            width: 400px;
            left: 0px;
            top: 0px;
            height: 50px;
        }
        
        .entete_d
        {
            position: absolute;
            height: 50px;
            background-color: #99CCCC;
        }
 
        .Cellule
        {
            width: 100px;
        }
        
        .pied
        {
            position: absolute;
            overflow: scroll;
            overflow-y: hidden;
            left: 0px;
            bottom: 0px;
            height: 50px;
            background-color: #99CCCC;
            width: 400px;
        }
        
        .donnees
        {
            position: absolute;
            overflow: scroll;
            overflow-x: hidden;
            left: 0px;
            top: 50px;
            width: 400px;
            height: 150px;
            background-color: #9999CC;
        }
        
        table
        {
            border-collapse: collapse;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            var hsb = getScrollBarWidth();
            $("#datas").css("padding-right", hsb + "px");
            $("#gene").css("padding-right", hsb + "px");
        });
 
        function getScrollBarWidth() {
            var $outer = $('<div>').css({ visibility: 'hidden', width: 100, overflow: 'scroll' }).appendTo('body'), widthWithScroll = $('<div>').css({ width: '100%' }).appendTo($outer).outerWidth();
            $outer.remove();
            return 100 - widthWithScroll;
        };
 
        function doOnScroll(mondiv) {
            document.getElementById("ligne").style.left = (-mondiv.scrollLeft) + "px"
            document.getElementById("datas").scrollLeft = (mondiv.scrollLeft)
        }
    </script>
</head>
<body>
    <div class="general" id="gene">
        <div style="z-index: 10;" class="entete_s">
            <div  id="ligne" class="entete_d">
                <table width="500" height="50" border="1">
                    <tr>
                        <td class="Cellule">
                            Alpha
                        </td>
                        <td class="Cellule">
                            Beta
                        </td>
                        <td class="Cellule">
                            Gamma
                        </td>
                        <td class="Cellule">
                            Omega
                        </td>
                        <td class="Cellule">
                            Upsilon
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div style="z-index: 10;" class="donnees" id="datas">
            <table width="500" height="200" border="1">
                <tr height="50">
                    <td class="Cellule">
                        1
                    </td>
                    <td class="Cellule">
                        2
                    </td>
                    <td class="Cellule">
                        3
                    </td>
                    <td class="Cellule">
                        4
                    </td>
                    <td class="Cellule">
                        5
                    </td>
                </tr>
                <tr height="50">
                    <td class="Cellule">
                        1
                    </td>
                    <td class="Cellule">
                        2
                    </td>
                    <td class="Cellule">
                        3
                    </td>
                    <td class="Cellule">
                        4
                    </td>
                    <td class="Cellule">
                        5
                    </td>
                </tr>
                <tr height="50">
                    <td class="Cellule">
                        1
                    </td>
                    <td class="Cellule">
                        2
                    </td>
                    <td class="Cellule">
                        3
                    </td>
                    <td class="Cellule">
                        4
                    </td>
                    <td class="Cellule">
                        5
                    </td>
                </tr>
                <tr height="50">
                    <td class="Cellule">
                        1
                    </td>
                    <td class="Cellule">
                        2
                    </td>
                    <td class="Cellule">
                        3
                    </td>
                    <td class="Cellule">
                        4
                    </td>
                    <td class="Cellule">
                        5
                    </td>
                </tr>
            </table>
        </div>
        <div style="z-index: 10;" class="pied" onscroll="doOnScroll(this);">
            <table width="500" height="50" border="1">
                <tr>
                    <td class="Cellule">
                        a
                    </td>
                    <td class="Cellule">
                        b
                    </td>
                    <td class="Cellule">
                        g
                    </td>
                    <td class="Cellule">
                        o
                    </td>
                    <td class="Cellule">
                        y
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

Tableau entete et pied fixe mais largeur colonne variable

Dimensionnement en CSS

Discussions similaires

Partager

Partager