Table en-tête fixe et corps scrollable

j'essaie de faire une table avec un en-tête fixe et un contenu scrollable en utilisant la table bootstrap 3. Malheureusement, les solutions que j'ai trouvé ne fonctionne pas avec bootstrap ou gâcher le style.

ici il y a une table de bootstrap simple, mais pour une raison inconnue la hauteur du corps n'est pas 10px. 

height: 10px !important; overflow: scroll;

exemple: 

html lang-html prettyprint-override"><link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

<table class="table table-striped">
    <thead>
    <tr>
        <th>Make</th>
        <th>Model</th>
        <th>Color</th>
        <th>Year</th>
    </tr>
    </thead>
    <tbody style="height: 10px !important; overflow: scroll; ">
    <tr>
        <td class="filterable-cell">111 Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
            <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
     <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    </tbody>
    
</table>
133
demandé sur Roko C. Buljan 2014-01-16 21:18:13

15 réponses

Voici la solution de travail

HTML 

<table class="table table-striped">
    <thead>
    <tr>
        <th>Make</th>
        <th>Model</th>
        <th>Color</th>
        <th>Year</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
            <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
     <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    </tbody>

CSS 

table {
        width: 100%;
    }

thead, tbody, tr, td, th { display: block; }

tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

thead th {
    height: 30px;

    /*text-align: left;*/
}

tbody {
    height: 120px;
    overflow-y: auto;
}

thead {
    /* fallback */
}


tbody td, thead th {
    width: 19.2%;
    float: left;
}

lien vers jsfiddle

72
répondu giulio 2014-02-19 04:55:51

vous aurez probablement plusieurs tables sur une page, donc vous avez besoin des classes CSS. Veuillez trouver la solution de @giulio modifiée pour cela.

il suffit de le déclarer dans le tableau: 

<table class="table table-striped header-fixed"></table>

CSS 

.header-fixed {
    width: 100% 
}

.header-fixed > thead,
.header-fixed > tbody,
.header-fixed > thead > tr,
.header-fixed > tbody > tr,
.header-fixed > thead > tr > th,
.header-fixed > tbody > tr > td {
    display: block;
}

.header-fixed > tbody > tr:after,
.header-fixed > thead > tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

.header-fixed > tbody {
    overflow-y: auto;
    height: 150px;
}

.header-fixed > tbody > tr > td,
.header-fixed > thead > tr > th {
    width: 20%;
    float: left;
}

sachez que l'implémentation actuelle ne convient qu'à cinq colonnes. Si vous avez besoin d'un nombre différent, changez le paramètre largeur de 20% *100% / number_of_columns*.

66
répondu Alex Klaus 2014-04-04 06:50:28

j'utilise Stickytablheaders sur GitHub et ça marche comme du charme!

j'ai dû ajouter ce css pour rendre l'en-tête Pas transparent cependant. 

table#stickyHeader thead {
  border-top: none;
  border-bottom: none;
  background-color: #FFF;
}
49
répondu Rosdi Kasim 2016-05-17 09:51:10

N'a pas besoin de l'envelopper dans un div...

CSS : 

tr {
width: 100%;
display: inline-table;
table-layout: fixed;
}

table{
 height:300px;              // <-- Select the height of the table
 display: -moz-groupbox;    // Firefox Bad Effect
}
tbody{
  overflow-y: scroll;      
  height: 200px;            //  <-- Select the height of the body
  width: 100%;
  position: absolute;
}

Bootply : http://www.bootply.com/AgI8LpDugl

36
répondu candybeer 2016-03-29 19:39:41

fixe table head-CSS-only

simplement position: sticky; top: 0; vos éléments th . (Chrome, FF, bord) 

.tableFixHead {
  overflow-y: auto;
  height: 100px;
}

.tableFixHead table {
  border-collapse: collapse;
  width: 100%;
}

.tableFixHead th,
.tableFixHead td {
  padding: 8px 16px;
}

.tableFixHead th {
  position: sticky;
  top: 0;
  background: #eee;
}
<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

tête de table fixe - utilisant JS

vous pouvez utiliser un peu de JS et translateY le th elements

exemple de jQuery 

var $th = $('.tableFixHead').find('thead th')
$('.tableFixHead').on('scroll', function() {
  $th.css('transform', 'translateY('+ this.scrollTop +'px)');
});
.tableFixHead { overflow-y: auto; height: 100px; }

table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th { background:#eee; }
<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Ou de la plaine ES6 si vous préférez: 

// Fix table head
function tableFixHead (e) {
    const el = e.target;
    el.querySelector("thead th").style.transform = `translateY(${el.scrollTop}px)`;
}
[...document.querySelectorAll(".tableFixHead")].forEach(el => 
    el.addEventListener("scroll", tableFixHead)
);
26
répondu Roko C. Buljan 2018-09-19 16:29:19

la Fin de la partie (Histoire de ma vie), mais puisque c'est le premier résultat sur google, et rien de ce qui précède m'travail, voici mon code 

/*Set a min width where your table start to look like crap*/
table { min-width: 600px; }

/*The next 3 sections make the magic happen*/
thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

tbody {
    display: block;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
}

td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/*Use the following to make sure cols align correctly*/
table, tr, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}


/*Set your columns to where you want them to be, skip the one that you can have resize to any width*/
    th:nth-child(1), td:nth-child(1) {
    width: 85px;
}
th:nth-child(2), td:nth-child(2) {
    width: 150px;
}
th:nth-child(4), td:nth-child(4) {
    width: 125px;
}
th:nth-child(5) {
    width: 102px;
}
td:nth-child(5) {
    width: 85px;
}
11
répondu Vee 2017-04-23 05:47:34

à mes yeux, l'un des meilleurs plugins pour jQuery est DataTables .

il a également une extension pour en-tête fixe , et il est très facilement mis en œuvre.

tiré de leur site:

HTML: 

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>0,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>0,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>,000</td>
        </tr>
  </tbody>
</table>

JavaScript: 

$(document).ready(function() {
    var table = $('#example').DataTable();

    new $.fn.dataTable.FixedHeader( table );
} );

mais le plus simple que vous pouvez avoir pour juste faire un scrollable <tbody> est: 

//configure table with fixed header and scrolling rows
$('#example').DataTable({
    scrollY: 400,
    scrollCollapse: true,
    paging: false,
    searching: false,
    ordering: false,
    info: false
});
9
répondu KD2ND 2017-03-29 14:32:47

il est plus facile avec css 

table tbody { display:block; max-height:450px; overflow-y:scroll; }
table thead, table tbody tr { display:table; width:100%; table-layout:fixed; }
6
répondu Simsek Mert 2018-03-29 17:43:13

, Vous devriez essayer avec "display:block;" tbody, parce que maintenant c'est inline-block et pour régler la hauteur, l'élément "bloc"

2
répondu Walter Maier 2014-01-16 17:42:25

j'ai eu beaucoup de mal à faire fonctionner la bibliothèque stickytableheaders. En faisant un peu plus de recherche, j'ai trouvé floatThead est une alternative activement maintenue avec des mises à jour récentes et une meilleure documentation.

2
répondu bmjjr 2017-05-07 05:18:17

Voici mon stylo copen sur la façon de faire l'en-tête de table fixe avec des lignes et des colonnes. Les colonnes sont également de largeur fixe, http://codepen.io/abhilashn/pen/GraJyp 

<!-- Listing table -->
        <div class="row">
            <div class="col-sm-12">
                <div class="cust-table-cont">
                <div class="table-responsive">
                  <table border="0" class="table cust-table"> 
                    <thead>
                        <tr style="">
                          <th style="width:80px;">#</th> 
                          <th style="width:150px;" class="text-center"><li class="fa fa-gear"></li></th>  
                          <th style="width:250px;">Title</th>  
                          <th style="width:200px;">Company</th> 
                          <th style="width:100px;">Priority</th> 
                          <th style="width:120px;">Type</th>     
                          <th style="width:150px;">Assigned to</th> 
                          <th style="width:120px;">Status</th> 
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <th style="width:80px;">1</th>
                          <td style="width:150px;" class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td style="width:250px;">Lorem ipsum dolor sit</td>
                          <td style="width:200px;">lorem ispusm</td>
                          <td style="width:100px;">high</td>
                          <td style="width:120px;">lorem ipsum</td>
                          <td style="width:150px;">lorem ipsum</td>
                          <td style="width:120px;">lorem ipsum</td>
                        </tr>

                        <tr>
                          <th scope="row">2</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">3</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">4</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">5</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">6</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">7</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">8</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">9</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">10</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">11</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">12</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                    </tbody>
                  </table>
                </div>
                </div> <!-- End of cust-table-cont block -->
            </div>
        </div> <!-- ENd of row -->


.cust-table-cont { width:100%; overflow-x:auto; } 
.cust-table-cont .table-responsive { width:1190px;  }
.cust-table { table-layout:fixed;  } 
.cust-table thead, .cust-table tbody { 
display: block;
}
.cust-table tbody { max-height:620px; overflow-y:auto; }
1
répondu Abhilash Narayan 2017-02-18 01:13:21

a utilisé ce lien, stackoverflow.com/a/17380697/1725764 , par Hashem Qolami dans les commentaires des billets originaux et utilisé display:inline-blocks au lieu de floats. Fixe les bordures si la table a aussi la classe 'table-bordered'. 

table.scroll {
  width: 100%;  
  &.table-bordered {
    td, th {
      border-top: 0;
      border-right: 0;
    }    
    th {
      border-bottom-width: 1px;
    }
    td:first-child,
    th:first-child {
      border-right: 0;
      border-left: 0;
    }
  }
  tbody {
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden;  
  }
  tbody, thead {
    display: block;
  }
  tr {
    width: 100%;
    display: block;
  }
  th, td {
    display: inline-block;

  }
  td {
    height: 46px; //depends on your site
  }
}

alors il suffit d'ajouter les largeurs de la td et th 

table.table-prep {
  tr > td.type,
  tr > th.type{
    width: 10%;
  }
  tr > td.name,
  tr > th.name,
  tr > td.notes,
  tr > th.notes,
  tr > td.quantity,
  tr > th.quantity{
    width: 30%;
  }
}
0
répondu juppee 2017-05-23 12:18:15

vous pouvez placer deux div où 1st div (en-tête) aura la barre de défilement transparente et 2nd div aura des données avec visible/auto barre de défilement. L'échantillon a un fragment de code angulaire pour la boucle à travers les données.

ci-dessous code travaillé pour moi - 

<div id="transparentScrollbarDiv" class="container-fluid" style="overflow-y: scroll;">
    <div class="row">
        <div class="col-lg-3 col-xs-3"><strong>{{col1}}</strong></div>
        <div class="col-lg-6 col-xs-6"><strong>{{col2}}</strong></div>
        <div class="col-lg-3 col-xs-3"><strong>{{col3}}</strong></div>
    </div>
</div>
<div class="container-fluid" style="height: 150px; overflow-y: auto">
    <div>
        <div class="row" ng-repeat="row in rows">
            <div class="col-lg-3 col-xs-3">{{row.col1}}</div>
            <div class="col-lg-6 col-xs-6">{{row.col2}}</div>
            <div class="col-lg-3 col-xs-3">{{row.col3}}</div>
        </div>
    </div>
</div>

style supplémentaire pour cacher la barre de défilement de l'en-tête - 

<style>
        #transparentScrollbarDiv::-webkit-scrollbar {
            width: inherit;
        }

        /* this targets the default scrollbar (compulsory) */

        #transparentScrollbarDiv::-webkit-scrollbar-track {
            background-color: transparent;
        }

        /* the new scrollbar will have a flat appearance with the set background color */

        #transparentScrollbarDiv::-webkit-scrollbar-thumb {
            background-color: transparent;
        }

        /* this will style the thumb, ignoring the track */

        #transparentScrollbarDiv::-webkit-scrollbar-button {
            background-color: transparent;
        }

        /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

        #transparentScrollbarDiv::-webkit-scrollbar-corner {
            background-color: transparent;
        }

        /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
    </style>
0
répondu Prateek Rai 2015-11-30 22:04:00

pour tout ce qu'il vaut maintenant: j'ai posté une solution à une sœur-fil défilement de Table avec HTML et CSS qui

  • prend deux tables (une pour l'en - tête unique, une pour tout-layouted par le navigateur)
  • après la mise en page, ajuster la table supérieure (en-tête seulement) aux largeurs de la table inférieure
  • hide ( visibility , pas display ) l'en-tête de la table inférieure et faire la table inférieure défilement w/dans un div

la solution est agnostique à tous les styles / cadres utilisés - donc peut-être il est utile ici aussi...

une longue description est dans défilement de la Table avec HTML et CSS / le code est aussi dans ce stylo: https://codepen.io/sebredhh/pen/QmJvKy

0
répondu Sebastian Rothbucher 2018-04-10 20:58:35

ajoutez D'abord un certain markup pour une table bootstrap. Ici, j'ai créé une table rayée, mais ai également ajouté une classe de table personnalisée .table-scroll qui ajoute barre de défilement verticale à la table et rend l'en-tête de la table fixe tout en défilant vers le bas. 

<div class="col-xs-8 col-xs-offset-2 well">
    <table class="table table-scroll table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>County</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Andrew</td>
                <td>Jackson</td>
                <td>Washington</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Thomas</td>
                <td>Marion</td>
                <td>Jackson</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Benjamin</td>
                <td>Warren</td>
                <td>Lincoln</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Grant</td>
                <td>Wayne</td>
                <td>Union</td>
            </tr>
            <tr>
                <td>5</td>
                <td>John</td>
                <td>Adams</td>
                <td>Marshall</td>
            </tr>
            <tr>
                <td>6</td>
                <td>Morgan</td>
                <td>Lee</td>
                <td>Lake</td>
            </tr>
            <tr>
                <td>7</td>
                <td>John</td>
                <td>Henry</td>
                <td>Brown</td>
            </tr>
            <tr>
                <td>8</td>
                <td>William</td>
                <td>Jacob</td>
                <td>Orange</td>
            </tr>
            <tr>
                <td>9</td>
                <td>Kelly</td>
                <td>Davidson</td>
                <td>Taylor</td>
            </tr>
            <tr>
                <td>10</td>
                <td>Colleen</td>
                <td>Hurst</td>
                <td>Randolph</td>
            </tr>
            <tr>
                <td>11</td>
                <td>Rhona</td>
                <td>Herrod</td>
                <td>Cumberland</td>
            </tr>
            <tr>
                <td>12</td>
                <td>Jane</td>
                <td>Paul</td>
                <td>Marshall</td>
            </tr>
            <tr>
                <td>13</td>
                <td>Ashton</td>
                <td>Fox</td>
                <td>Calhoun</td>
            </tr>
            <tr>
                <td>14</td>
                <td>Garrett</td>
                <td>John</td>
                <td>Madison</td>
            </tr>
            <tr>
                <td>15</td>
                <td>Fredie</td>
                <td>Winters</td>
                <td>Washington</td>
            </tr>
        </tbody>
    </table>
</div>

css 

.table-scroll tbody {
    position: absolute;
    overflow-y: scroll;
    height: 250px;
}

.table-scroll tr {
    width: 100%;
    table-layout: fixed;
    display: inline-table;
}

.table-scroll thead > tr > th {
    border: none;
}
0
répondu core114 2018-09-13 05:33:39