Recherche d'en-têtes fixes sur une table à fenêtre réglable

Question

J'ai cherché un peu partout et je n'ai pas trouvé de bonne solution à mon problème. Je cherche à créer un tableau avec des en-têtes fixes qui restent lorsque l'on fait défiler le reste du tableau. Le problème est que je veux aussi qu'il puisse être aligné lorsque la fenêtre de la page s'ajuste. J'ai réussi à obtenir des en-têtes fixes et à aligner les colonnes lorsque j'ajuste la fenêtre, mais je n'ai pas réussi à faire fonctionner les deux ensemble. Est-ce qu'il existe un script qui peut faire cela ? J'ai essayé fixedheadertable jquery, flexigrid, fixed-header-coffee, chromatable et floatyhead. Aucun d'entre eux n'a été en mesure de me donner la solution que je recherche. Peut-être que je fais quelque chose de mal, mais j'ai un tableau traditionnel qui utilise theader, tbody, etc. J'aimerais éviter de diviser le tableau en deux tableaux, car il semble qu'ils ne s'alignent jamais correctement, mais si c'est la seule solution, je l'accepterai.

Aidez-nous !

Answer 1

Vous pouvez utiliser des codes HTML/CSS standard. Plus précisément, utilisez display/overflow/height dans votre CSS et thead/tbody dans votre HTML. Exemple CSS :

.scrollableTable tbody {
    display: block;
    overflow-y: auto;
    width: 100%;
    height: 50px;
}
.scrollableTable tr {
    display: block;
}
.scrollableTable td, .scrollableTable th {
    width: 50%;
}

Exemple HTML :

<table class="scrollableTable">
    <thead>
        <tr>
            <th>Fruit</th>
            <th>Color</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Apples</td>
            <td>Red</td>
        </tr>
        <tr>
            <td>Bananas</td>
            <td>Yellow</td>
        </tr>
        <tr>
            <td>Oranges</td>
            <td>Orange</td>
        </tr>
    </tbody>
</table>

Answer 2

J'ai modifié la réponse ci-dessus de Nate Barr. Dans la réponse précédente, l'alignement des colonnes sera encombré.

Feuille de style

<style type="text/css">
.scrollableTable thead {
 display: block;
    //overflow-y: auto;
    width: 105%;
    height: 25px;
}
.scrollableTable tbody {
 display: block;
    overflow-y: auto;
    width: 105%;
    height: 200px;
}

Tableau

<table width="439" border="1" align="center" class="scrollableTable">
    <thead>
        <tr>
          <th width="20">No</th>
            <th width="140">Fruit</th>
          <th width="131">test</th>
          <th width="120">Color</th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td>1</td>
            <td>Apples</td>
            <td>ohyoijmnpkjoijikjm;kl</td>
            <td>Red</td>
        </tr>
        <tr>
          <td>2</td>
            <td>Bananas</td>
            <td>ghjghjghj</td>
            <td>Yellow</td>
        </tr>
        <tr>
          <td>3</td>
            <td>Oranges</td>
            <td>hfkjhkjhkhjkl</td>
            <td>Orange</td>
        </tr>
        <tr>
          <td>4</td>
          <td>fghgfmjhgjhgjhg</td>
          <td>hjkhjkgk</td>
          <td>fghfg</td>
        </tr>
        <tr>
          <td>5</td>
          <td>fghfg</td>
          <td>fgjfjfd</td>
          <td>gfh</td>
        </tr>
        <tr>
          <td>6</td>
          <td>fghfhj</td>
          <td>gjdfhgkgfk</td>
          <td>ghjgfk</td>
        </tr>
        <tr>
          <td>7</td>
          <td>jkgfk</td>
          <td>hjfkgfk</td>
          <td>hjlklh</td>
        </tr>
        <tr>
          <td>8</td>
          <td>hgjfgghjghj</td>
          <td>fgjkjhljk</td>
          <td>hjkj</td>
        </tr>
        <tr>
          <td>9</td>
          <td>jhkjkf</td>
          <td>fgjghj</td>
          <td>gkhkfjghhgjgh</td>
        </tr>
        <tr>
          <td>10</td>
          <td>fkjfhk</td>
          <td>hjg</td>
          <td>fjkhgk</td>
        </tr>
        <tr>
          <td>11</td>
          <td>ghkkh</td>
          <td>fghd</td>
          <td>ghkgh</td>
        </tr>
        <tr>
          <td>12</td>
          <td>kjhjklhgkjgljghjh</td>
          <td>hlg</td>
          <td>kjghkjhgkj</td>
        </tr>
        <tr>
          <td>13</td>
          <td>kgk</td>
          <td>d</td>
          <td>kkjhgklh</td>
        </tr>
        <tr>
          <td>14</td>
          <td>hkjhgkjhklj</td>
          <td>hjgk</td>
          <td>lhjljhgygyh</td>
        </tr>
        <tr>
          <td>15</td>
          <td>ijihgjil</td>
          <td>fg</td>
          <td>lhjoklh</td>
        </tr>
        <tr>
          <td>16</td>
          <td>lohkjl</td>
          <td>ghj</td>
          <td>lholhuhity</td>
        </tr>
        <tr>
          <td>17</td>
          <td>kgjhgikghiu</td>
          <td>ghjk</td>
          <td>ljhljkyhklj</td>
        </tr>
        <tr>
          <td>18</td>
          <td>kgihgik</td>
          <td>ghjg</td>
          <td>iuhgouygih8</td>
        </tr>
        <tr>
          <td>19</td>
          <td>uoiughuiohou</td>
          <td>ghkkj</td>
          <td>oijhoiyhigouohu</td>
        </tr>
        <tr>
          <td>20</td>
          <td>ihnohnjoikjnm</td>
          <td>fghfg</td>
          <td>ioojhjphiuhiuhohouh</td>
        </tr>            
    </tbody>
</table>

Answer 3

Tableaux de données jQuery n'est peut-être pas tout à fait ce que vous recherchez, mais l'avez-vous examiné ? La documentation sur les tableaux de données comprend une section spéciale pour "FixedHeader", ce qui vous permet d'examiner un certain nombre d'implémentations.

http://datatables.net/examples/

Quelques exemples d'en-têtes fixes DataTables tirés de la documentation :

1. http://datatables.net/release-datatables/extras/FixedHeader/two_tables.html

   "L'exemple suivant montre deux ... tableaux pour lesquels l'option FixedHeader est activée. Le pied de page est également fixe..."

2. http://datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html

   "Cet exemple montre comment FixedHeader peut ressembler davantage à une application de feuille de calcul.

Answer 4

Essayez cette réponse, Cela fonctionne dans IE8, Firefox et Chrome.

Style

    .Container { margin-left: 200px; background-color: green; overflow: scroll; overflow-x: hidden; height: 200px; }

    .BigTable { width: 100%; }

    .BigTable td { width: 40%; }

    .BigTable td + td { width: 30%; }

    .BigTable td + td + td { width: 30%; }

    .Header { margin-left: 200px; height: 30px; background-color: blue; }

    .Header .Heading { width: 40%; float: left; height: 30px; }

    .Header .Heading + .Heading  { width: 30%; }

    .Header .Heading + .Heading + .Heading { width: 30%; }

Tableau

<div class="Header">
    <div class="Heading">Heading 1</div>
    <div class="Heading">Heading 2</div>
    <div class="Heading">Heading 3</div>
</div>
<div class="Container">
    <table class="BigTable">
        <tbody class="scrollContent">
            <tr class="normalRow">
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
            <tr class="alternateRow">
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
            <tr class="normalRow">
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
        <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>

                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
        </tbody>
    </table>
</div>  

ou essayez ceci

#listBevel, #listTable {
    position: absolute;
    z-index: 2;
    border: 1px solid #989898;
    top: 85px;
    left: 227px;
    right: 37px;
    height: 270px;
    min-width: 654px;
}

/* @group List Table Headers */

#listTableHeaders {
    position: absolute;
    z-index: 3;
    top: 67px;
    left: 39px;
    right: 37px;
    height: 500px;
    min-width: 654px;
    border: 1px solid #989898;
    overflow: hidden;
    overflow-y: scroll;
}

.tableHeaderShadow {
    background: url(/images/interface/bevel_shadow.png) repeat-x;
    position: fixed;
    height: 5px;
    top: 105px;
    right: 53px;
    left: 228px;
    min-width: 639px;
}

#scrollBarCoverContainer {
    position: fixed;
    z-index: 5;
    top: 86px;
    left: 228px;
    right: 38px;
    height: 0;
    min-width: 654px;
    font-size: 11px;
    border: 1px none #989898;
    text-align: right;
}

#scrollBarCoverUp {
    background: url(/images/interface/list_header_bg.png) repeat-x;
    width: 14px;
    height: 18px;
    border-left: 1px solid #e5e5e5;
    float: right;
}

table#entryListHeaders th img.sortArrow {
    float: right;
}

table#entryListHeaders th a {
    color: #000;
    text-decoration: none;
    display: block;
    height: 18px;
}

table#entryListHeaders th:hover {
    background-position: 0 -18px;
    cursor: default;
}

table#entryListHeaders th {
    background: url(/images/interface/list_header_bg.png) repeat-x;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #a5a5a5;
    text-align: left;
    padding: 0 5px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 18px;
    width: 42%;
    font-size: 11px;
    line-height: 1.6em;
    text-shadow: #fff 0 1px 0;
}
table#entryListHeaders th + th {
    width: 32%;
}

table#entryListHeaders th.selectedHeader {
    text-shadow: #d8e6ff 0 1px 0;
    background-image: url(/images/interface/list_header_selected.png);
    border-left-color: #c2d4f2;
}

#listTable {
    background-color: #fefefe;
    top: 104px;
    height: 251px;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: scroll;
    font-size: 11px;
    border-collapse: collapse;
}

table#entryList {
}

table#entryList td {
    width: 42%;
}

span.truncateText {
    display: block;
    height: 18px;
    overflow: hidden;
}

tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
    border-right: 1px hidden #cbd1d8;
    padding: 1px 5px;
    height: 18px;
    line-height: 1.6em;
    margin: 0;
    border-left-style: hidden;
    border-left-width: 1px;
}

tbody.scrollContent tr.alternateRow {
    background: #eaf2ff;
}

tbody.scrollContent tr.selectedRow td {
    background: url(/images/interface/selected_row.png) repeat-x;
    color: #fff;
    border-right-style: hidden;
}

table#entryList td + td {
    width: 32%;
}

tbody.scrollContent tr:hover, tbody.scrollContent tr.alternateRow:hover {
    background-color: #d8e7ff;
    cursor: default;
}

<div id="scrollBarCoverContainer">

        <div id="scrollBarCoverUp"></div>

        <div class="tableHeaderShadow"></div>

    </div>

    <div id="listTableHeaders">

        <table id="entryListHeaders" border="0" cellpadding="0" cellspacing="0" width="100%">

        <thead class="fixedHeader">
            <tr>
                <th id="selectedHeader">Name</th>
                <th>Domain</th>

                <th>>Modified</th>
            </tr>
        </thead>
        <tbody class="scrollContent">
            <tr class="normalRow">
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>

                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
            <tr class="alternateRow">
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>

            <tr class="normalRow">
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>

            <tr class="alternateRow">

                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>

                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>

                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>

                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>

                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>

            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">

                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>

                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>

                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>

                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>

            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">

                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>

                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>

                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
        </tbody>
    </table>

</div>

Answer 5

Il s'agit d'une solution d'amélioration progressive qui devrait être compatible avec tous les navigateurs, grâce à jQuery.

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        var sizeColWidths = function() {
            // reset column widths (in case previously set)
            $('#fruitTable td, #fruitTable th').css('width', 'auto');
            $('#fruitTable').removeClass('scrollableTable');
            $('#fruitTable tbody').css('width', 'auto');
            // record current column widths
            var i=0, colWidth=new Array();
            $('#fruitTable th').each(function() {
                colWidth[i++] = $(this).outerWidth();
            });
            // freeze the current column widths
            $('#fruitTable tr').each(function() {
                var i=0;
                $('th, td', this).each(function() {
                    $(this).css('width', colWidth[i++] + 'px');
                })
            });
            // make the table body scroll (add tbody width for scroll bar)
            $('#fruitTable').addClass('scrollableTable');
            $('#fruitTable tbody').css('width', ($('#fruitTable thead').width() + 20) +'px');
        };
        $(document).ready(function() {sizeColWidths()});
        $(window).resize(function() {sizeColWidths()});
    </script>
    <style type="text/css">
        .scrollableTable tbody {
            display: block;
            height:50px;
            overflow-y:auto;
        }
        .scrollableTable tr {
            display: block;
        }
    </style>
</head>
<body>
    <table id="fruitTable">
        <thead>
            <tr>
                <th>Fruit</th>
                <th>Color</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Apples</td>
                <td>Red</td>
            </tr>
            <tr>
                <td>Bananas</td>
                <td>Yellow</td>
            </tr>
            <tr>
                <td>Grapes</td>
                <td>Purple</td>
            </tr>     
            <tr>
                <td>Limes</td>
                <td>Green</td>
            </tr>
            <tr>
                <td>Oranges</td>
                <td>Orange</td>
            </tr>
        </tbody>
    </table>
</body>
</html>