Discussion :

[M.Mounir]

Bonjour,

J'ai réussi grâce au forum de developpez.net à réaliser un tableau dont l'entête reste toujours fixe lorsque l'on descend les lignes grâce à un scrollbar vertical (sauf que ça ne fonctionne pas jusqu'à maintenant sous chrome).Mais, je me suis bloqué ça fait deux semaines sur un problème important d'affichage: le nombre de colonne de ma table (asp:table) varie avec les données. Si le nombre de ces colonnes dépasse la taille de la table, une scrollbar horizontale apparait pour visualiser les données a droite. le problème c'est que l'entête sort du cadre du div et ne bouge pas avec les données.
J'ai essayé de mettre position:relative au "conteneur" (div) ça ne marche pas.
le problème se pose sous IE et chrome alors que sous Firefox, l'entête scrolle avec les données sauf que j'ai deux!! scrollbar horizontales une du div et l'autre de la table.
Avez-vous des pistes pour résoudre ce problème?
Ma solution ressemble énormément à ceci http://www.codeproject.com/KB/webfor...ridHeader.aspx sauf que dans cet exemple le nombre de colonne est fixe (!!tester cette solution chrome, l'entête n'est pas fixe).
Merci d'avance.

[Invité]

bonjour
sans code on peut pas savoir

[M.Mounir]

bonjour
sans code on peut pas savoir

Tu as raison.
voici le code aspx:

Code :

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

1
2
3
4
<div style="border:0;">
            <asp:Table ID="tSummaryIc" runat="server">
            </asp:Table>
        </div>

ici les styles et le javascript:

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
 <style type="text/css">
          .Issue
            {
                font-family:Arial;
                font-size:12;
                font-weight:bold;
                width: 400px;
            }
     </style>
     <style type="text/css">
 
    .WrapperDiv {
        width:1170px;height:680px;
    }        
    .WrapperDiv TH {
        position:relative;
        top: expression(offsetParent.scrollTop);
    }
    .WrapperDiv TR 
    {
        /* Needed for IE */
        height:0px;
    }
    .ScrollContent 
    {
        /* Needed for Opera */
        display: block;
        overflow: auto;
        width: 100%;
        height: 250px;
    }
    .FixedHeader
    {
        /* Needed for opera */
        display: block;
    }
 
</style>
<script type="text/ecmascript">
    var headerHeight = 8;
 
    /// <summary>
    ///  Responsible for call appropriate function according to browser
    ///  for Browser Compatibility
    /// </summary>
    function onLoad() {
        if (navigator.appName == "Opera") {
            freezetableHeaderForOpera('tSummaryIc');
        }
        else {
            FreezetableHeaderForIEAndFF('tSummaryIc', 'WrapperDiv');
        }
    }
    function FreezetableHeaderForIEAndFF(tableID, wrapperDivCssClass) 
    {
        var table = document.getElementById(tableID);
        if (table != 'undefined')
        {
            table.style.visibility = 'hidden';
            var div = null;
            if (table.parentNode != 'undefined') 
            {
                //Find wrapper div output by table
                div = table.parentNode;
                if (div.tagName == "DIV")
                {
                    div.className = wrapperDivCssClass;  
                    div.style.overflow = "auto";                   
                }
            }
            var table = prepareFixedHeader(table);
            var tbody = table.getElementsByTagName('TBODY')[0];
 
            //Needed for Firefox
            tbody.style.height = (div.offsetHeight - headerHeight) + 'px';
 
            tbody.style.overflowX = "hidden";
            tbody.overflow = 'auto';
            tbody.overflowX = 'hidden';
 
            table.style.visibility = 'visible';
        }
    }
    /// <summary>
    ///  Used to prepare a fixed table header
    /// </summary>
    /// <param name="table" type="table">
    ///   The Reference Of table control
    /// </param>
    function prepareFixedHeader(table) {
        //Find DOM TBODY element and  and
        var tags = table.getElementsByTagName('TBODY');
        if (tags != 'undefined') {
            var tbody = tags[0];
 
            var trs = tbody.getElementsByTagName('TR');
 
            if (trs != 'undefined') {
                headerHeight += trs[0].offsetHeight;
 
                //Remove first TR tag from it        
                var headTR = tbody.removeChild(trs[0]);
 
                //create a new element called THEAD
                var head = document.createElement('THEAD');
                head.appendChild(headTR);
           //     head.position = 'fixed';
                //add to a THEAD element instead of TR so CSS styles
                //can be applied properly in both IE and FireFox
                table.insertBefore(head, table.firstChild);
            }
        }
 
        return table;
    }
    /// <summary>
    ///  Used to create a fixed table header and allow scrolling
    ///  for Opera (Tested in Opera-9.2)
    /// </summary>
    /// <param name="tableId" type="String">
    ///   Client-side ID of the table control
    /// </param>
    function freezetableHeaderForOpera(tableId) {
        var table = document.getElementById(tableId);
        if (table != 'undefined') {
            table = prepareFixedHeader(table);
 
            var headers = table.getElementsByTagName('THEAD')[0];
            headers.className = "FixedHeader";
 
            var tbody = table.getElementsByTagName('TBODY')[0];
            tbody.className = "ScrollContent";
            var cells = tbody.childNodes[0];
 
            for (var i = 0; i < cells.childNodes.length; i++) {
                var tableCell = cells.childNodes[i];
                var tableCellWidth = getStyle(tableCell, 'width')
                var headerCell = headers.childNodes[0].childNodes[i];
 
                var headerCellWidth = getStyle(headerCell, 'width');
 
                if (widthPxToInt(tableCellWidth) > widthPxToInt(headerCellWidth)) {
                    headerCell.style.width = (widthPxToInt(tableCellWidth) - 10) + "px";
                }
                else {
                    tableCell.style.width = (widthPxToInt(headerCellWidth) - 10) + "px";
                }
            }
        }
    }
    function getStyle(oElm, strCssRule) {
        var strValue = "";
        if (document.defaultView && document.defaultView.getComputedStyle) {
            strValue = document.defaultView.getComputedStyle(oElm,
                               "").getPropertyValue(strCssRule);
        }
        else if (oElm.currentStyle) {
            strCssRule = strCssRule.replace(/\-(\w)/g, function(strMatch, p1) {
                return p1.toUpperCase();
            });
            strValue = oElm.currentStyle[strCssRule];
        }
        return strValue;
    }
 
    /// <summary>
    ///  Used to convert from Pxel to Integer
    /// </summary>
    /// <param name="width" type="String">
    ///  Width of any thing like tableHeader,tableCell
    /// </param>    
    function widthPxToInt(width) {
        width = width.substr(0, width.length - 2);
        return new Number(width);
    }
 
</script>

Les colonnes et les lignes de la table sont construits en code behind (#).