Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Téléchargez Discussion :

Tableau avec entête et pied fixe


Sujet :

Téléchargez

  1. #1
    Membre chevronné
    Avatar de Pelote2012
    Homme Profil pro
    Développeur informatique
    Inscrit en
    mars 2008
    Messages
    913
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Haute Vienne (Limousin)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : mars 2008
    Messages : 913
    Points : 1 787
    Points
    1 787
    Billets dans le blog
    2
    Par défaut Tableau avec entête et pied fixe
    Bonjour,

    Je vous propose un nouvel élément à utiliser : Tableau avec entête et pied fixe

    Tableau avec entête et pied fixe et scroll sur les données.

    Le travail est partie d'un code généreusement donné par SpaceFrog:
    tableau a entete et colonne fixe
    voici l'original
    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
    <head runat="server">
        <title></title>
        <style type="text/css">
            .general
            {
                position: absolute;
                overflow: hidden;
                width: 400px;
                height: 200px;
                border: 1px solid;
            }
            
            .titre
            {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100px;
                height: 50px;
                background-color: #99CCCC;
            }
            
            .entete_l
            {
                position: absolute;
                left: 100px;
                top: 0px;
                height: 50px;
                background-color: #99CCCC;
            }
            
            .entete_c
            {
                position: absolute;
                top: 50px;
                left: 0px;
                width: 100px;
                background-color: #CCCCFF;
            }
            
            .donnees
            {
                position: absolute;
                overflow: scroll;
                left: 100px;
                top: 50px;
                width: 300px;
                height: 150px;
                background-color: #9999CC;
            }
            
            table
            {
                border-collapse: collapse;
            }
        </style>
        <script type="text/javascript">
            function doOnScroll(mondiv) {
                document.getElementById("colonne").style.top = (50 - mondiv.scrollTop) + "px"
                document.getElementById("ligne").style.left = (100 - mondiv.scrollLeft) + "px"
            }
        </script>
    </head>
    <body>
    <br /><br /><br /><br /><br /><br /><br />
        <div class="general">
            <div style="z-index: 100;" class="titre">
                <table width="100" height="50" border="1">
                    <tr>
                        <td width="100">
                            Titre
                        </td>
                    </tr>
                </table>
            </div>
            <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;" id="colonne" class="entete_c">
                <table width="100" height="200" border="1">
                    <tr height="50">
                        <td>
                            Ligne 1
                        </td>
                    </tr>
                    <tr height="50">
                        <td>
                            Ligne 2
                        </td>
                    </tr>
                    <tr height="50">
                        <td>
                            Ligne 3
                        </td>
                    </tr>
                    <tr height="50">
                        <td>
                            Ligne 4
                        </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>
    </body>

    Qu'en pensez-vous ?
    Si débugger est l'art d'enlever les bugs ... alors programmer est l'art de les créer

  2. #2
    Membre chevronné
    Avatar de Pelote2012
    Homme Profil pro
    Développeur informatique
    Inscrit en
    mars 2008
    Messages
    913
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Haute Vienne (Limousin)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : mars 2008
    Messages : 913
    Points : 1 787
    Points
    1 787
    Billets dans le blog
    2
    Par défaut Version sans scrolling horizontal
    Voici une version plus simple et plus classique. toutes les colonnes sont visibles (pas de scroll vertical).

    De plus j'ai centralisé la largeur totale.
    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
    <head id="Head1" runat="server">
        <title></title>
        <script src="/script/jquery-1.9.0.js" type="text/javascript"></script>
        <style type="text/css">
            .HauteurLigne
            {
                height: 50px;
            }
            
            table
            {
                border-collapse: collapse;
            }
            
            td
            {
                border: 1px solid;
            }
           
            .general
            {
                position: absolute;
                overflow: hidden;
                height: 250px;
                border: 1px solid;
            }
            
            .entete
            {
                position: absolute;
                left: 0px;
                top: 0px;
                position: absolute;
                background-color: #99CCCC;
            }
            
            .Cellule
            {
                width: 100px;
            }
            
            .pied
            {
                position: absolute;
                left: 0px;
                bottom: 0px;
                background-color: #99CCCC;
            }
            
            .donnees
            {
                position: absolute;
                overflow: scroll;
                overflow-x: hidden;
                left: 0px;
                top: 50px;
                height: 150px;
                background-color: #9999CC;
            }
        </style>
        <script type="text/javascript">
            $(function () {
    
                var LargTot = 400;
                $("#gene").css("width", LargTot + "px");
                $("#datas").css("width", LargTot + "px");
                $("#Foot").css("width", LargTot + "px");
                $("#tete").css("width", LargTot + "px"); 
    
                /*Elargir pour mettre scroll vertical en dehors du tableau*/
                var hsb = getScrollBarWidth();
                $("#gene").css("padding-right", hsb + "px");
                $("#datas").css("padding-right", hsb + "px");
    
                $("#tbdatas").css("width", LargTot + "px");
            });
    
            function getScrollBarWidth() {
                var width = 100, $outer = $('<div>').css({ visibility: 'hidden', width: width, overflow: 'scroll' }).appendTo('body'), widthWithScroll = $('<div>').css({ width: '100%' }).appendTo($outer).outerWidth();
                $outer.remove();
                return width - widthWithScroll;
            };
    
        </script>
    </head>
    <body>
        <div class="general" id="gene">
            <div class="entete" id="tete">
                <table>
                    <tr class="HauteurLigne">
                        <td class="Cellule">
                            Alpha
                        </td>
                        <td class="Cellule">
                            Beta
                        </td>
                        <td class="Cellule">
                            Gamma
                        </td>
                        <td class="Cellule">
                            Omega
                        </td>
                    </tr>
                </table>
            </div>
            <div class="donnees" id="datas">
                <table id="tbdatas">
                    <tr class="HauteurLigne">
                        <td class="Cellule">
                            1
                        </td>
                        <td class="Cellule">
                            2
                        </td>
                        <td class="Cellule">
                            3
                        </td>
                        <td class="Cellule">
                            4
                        </td>
                    </tr>
                    <tr class="HauteurLigne">
                        <td class="Cellule">
                            1
                        </td>
                        <td class="Cellule">
                            2
                        </td>
                        <td class="Cellule">
                            3
                        </td>
                        <td class="Cellule">
                            4
                        </td>
                    </tr>
                    <tr class="HauteurLigne">
                        <td class="Cellule">
                            1
                        </td>
                        <td class="Cellule">
                            2
                        </td>
                        <td class="Cellule">
                            3
                        </td>
                        <td class="Cellule">
                            4
                        </td>
                    </tr>
                    <tr class="HauteurLigne">
                        <td class="Cellule">
                            1
                        </td>
                        <td class="Cellule">
                            2
                        </td>
                        <td class="Cellule">
                            3
                        </td>
                        <td class="Cellule">
                            4
                        </td>
                    </tr>
                </table>
            </div>
            <div class="pied" id="Foot">
                <table>
                    <tr class="HauteurLigne">
                        <td class="Cellule">
                            a
                        </td>
                        <td class="Cellule">
                            b
                        </td>
                        <td class="Cellule">
                            g
                        </td>
                        <td class="Cellule">
                            o
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
    Si débugger est l'art d'enlever les bugs ... alors programmer est l'art de les créer

  3. #3
    Membre chevronné
    Avatar de Pelote2012
    Homme Profil pro
    Développeur informatique
    Inscrit en
    mars 2008
    Messages
    913
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Haute Vienne (Limousin)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : mars 2008
    Messages : 913
    Points : 1 787
    Points
    1 787
    Billets dans le blog
    2
    Par défaut
    Et voici la version qui s'agrandi jusqu'à une hauteur
    De plus la hauteur d'entete et de pied n'est plus forcée
    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
    <head id="Head1" runat="server">
        <title></title>
        <script src="/script/jquery-1.9.0.js" type="text/javascript"></script>
        <style type="text/css">
             table
            {
                border-collapse: collapse;
            }
            
            td
            {
                border: 1px solid;
            }
            
            .general
            {
                position: absolute;
                overflow: hidden;
                border: 1px solid;
            }
            
            .entete
            {
                position: absolute;
                left: 0px;
                top: 0px;
                position: absolute;
                background-color: #99CCCC;
            }
            
            .Cellule
            {
                width: 100px;
            }
            
            .pied
            {
                position: absolute;
                left: 0px;
                bottom: 0px;
                background-color: #99CCCC;
            }
            
            .donnees
            {
                position: absolute;
                overflow: hidden;
                left: 0px;
                background-color: #9999CC;
            }
        </style>
        <script type="text/javascript">
            $(function () {
    
                var hsb = getScrollBarWidth();
                var HautTot = 250;
                $("#datas").css("max-height", HautTot - parseInt($("#tete").css('height')) - parseInt($("#Foot").css('height')) + "px");
    
                /*Largeur totale du tableau*/
                var LargTot = 400;
                $("#gene").css("width", LargTot + "px");
                $("#tete").css("width", LargTot + "px");
                $("#datas").css("width", LargTot + "px");
                $("#Foot").css("width", LargTot + "px");
    
                /*Hauteur globale de départ*/
                $("#gene").css("height", parseInt($("#tete").css('height')) + parseInt($("#Foot").css('height')) + "px");
    
                /*Positionner les datas*/
                $("#datas").css("top", parseInt($("#tete").css('height')) + "px");
    
                $("#tbdatas").css("width", LargTot + "px");
    
                $("#btnAdd").click(function () {
                    var HL = 50;
                    var row = '<tr height=' + HL + '><td class="Cellule">1</td><td class="Cellule">2</td><td class="Cellule">3</td><td class="Cellule">4</td></tr>';
                    $('#tbdatas').append(row);
    
                    var Siz = parseInt($("#gene").css('height'));
                    if (Siz + HL < HautTot) {
                        $("#gene").css("height", Siz + HL + "px");
                    }
                    else {
                        /*Elargir pour mettre scroll vertical en dehors du tableau*/
                        if (parseInt($("#gene").css('padding-right'))!=hsb) {
                            $("#gene").css("padding-right", hsb + "px");
                            $("#datas").css("padding-right", hsb + "px");
                            $("#datas").css("overflow", "scroll");
                            $("#datas").css("overflow-x",  "hidden");
                        }
                    }
                });
    
            });
    
            function getScrollBarWidth() {
                var width = 100, $outer = $('<div>').css({ visibility: 'hidden', width: width, overflow: 'scroll' }).appendTo('body'), widthWithScroll = $('<div>').css({ width: '100%' }).appendTo($outer).outerWidth();
                $outer.remove();
                return width - widthWithScroll;
            };
    
        </script>
    </head>
    <body>
        <button id="btnAdd">
            Ajouter 1 ligne</button>
        <div class="general" id="gene">
            <div class="entete" id="tete">
                <table>
                    <tr>
                        <td class="Cellule">
                            Alpha
                        </td>
                        <td class="Cellule">
                            Beta
                        </td>
                        <td class="Cellule">
                            Gamma
                        </td>
                        <td class="Cellule">
                            Omega
                        </td>
                    </tr>
                </table>
            </div>
            <div class="donnees" id="datas">
                <table id="tbdatas">
                </table>
            </div>
            <div class="pied" id="Foot">
                <table>
                    <tr>
                        <td class="Cellule">
                            a
                        </td>
                        <td class="Cellule">
                            b
                        </td>
                        <td class="Cellule">
                            g
                        </td>
                        <td class="Cellule">
                            o
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
    Si débugger est l'art d'enlever les bugs ... alors programmer est l'art de les créer

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Tableau avec tri, filtre et pagination avec entete et pied fixe
    Par Pelote2012 dans le forum Contribuez
    Réponses: 1
    Dernier message: 18/12/2016, 19h06
  2. Tableau avec entêtes de lignes fixes qui dépassent
    Par Z4ng3tsu dans le forum ASP.NET
    Réponses: 0
    Dernier message: 29/06/2011, 10h25
  3. tableau avec scrollbar et légende fixe
    Par psgman113 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 21/08/2007, 11h34
  4. [HTML]Tableau avec entête fixe
    Par LE NEINDRE dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 18/08/2005, 12h40

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo