En-tête fixe du tableau et corps déroulant


260

J'essaie de créer un tableau avec un en-tête fixe et un contenu déroulant en utilisant le tableau bootstrap 3. Malheureusement, les solutions que j'ai trouvées ne fonctionnent pas avec bootstrap ou gâchent le style.

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

height: 10px !important; overflow: scroll;

Exemple:

<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>



Cela m'a vraiment aidé. Voici la solution jsfiddle.net/T9Bhm/7 Merci
giulio

Ne gère pas correctement l'attribut rayé lorsque les hauteurs td ne correspondent pas. jsfiddle.net/T9Bhm/4755 Voir le td {overflow-wrap: break-word ajouté; } que j'ai ajouté
John Zabroski

Réponses:


257

Tête de table fixe - CSS uniquement

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

.tableFixHead          { overflow-y: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; }

/* Just common table stuff. Really. */
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>

Résolution du problème des frontières TH

Puisqu'il borderne peut pas être peint correctement sur un THélément traduit , pour recréer et rendre des "bordures", utilisez la box-shadowpropriété:

/* Borders (if you need them) */
.tableFixHead,
.tableFixHead td {
  box-shadow: inset 1px -1px #000;
}
.tableFixHead th {
  box-shadow: inset 1px 1px #000, 0 1px #000;
}


Tête de table fixe - utilisant JS. (C'EST À DIRE)

Vous pouvez utiliser un peu de JS et traduire les théléments

Exemple jQuery

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

/* Just common table stuff. */
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 plaine ES6 si vous préférez (pas de jQuery requis):

// Fix table head
function tableFixHead (e) {
    const el = e.target,
          sT = el.scrollTop;
    el.querySelectorAll("thead th").forEach(th => 
      th.style.transform = `translateY(${sT}px)`
    );
}
document.querySelectorAll(".tableFixHead").forEach(el => 
    el.addEventListener("scroll", tableFixHead)
);

12
Wow, c'est la meilleure option avec le moins de frais généraux! Et cela fonctionne également avec overflow-x.
Souhait

1
Oui! fonctionne même avec une largeur de cellule variable (pas besoin de coder en dur la largeur des cellules comme dans les autres exemples) @Wish
Roko C. Buljan

2
Excellente solution! Merci
Dmitry Nichiporenko

2
J'ai trouvé que cela fonctionne dans Chrome et Firefox mais les en-têtes ne seront pas corrigés dans Edge ou IE11 en utilisant cette approche.
Jeff

2
@PussInBoots dans les exemples ci-dessus? Chrome? Rien ne saute
Roko C. Buljan

88

Vous obtiendrez probablement plusieurs tableaux sur une seule page, vous avez donc besoin de classes CSS. Veuillez trouver une solution modifiée de @ giulio pour cela.

Déclarez-le simplement 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, modifiez le paramètre de largeur de 20% à * 100% / nombre_de_colonnes *.


3
après avoir suivi toutes les différentes solutions complexes, je trouve que c'est la meilleure solution. Cependant, la barre de défilement verticale à a une certaine largeur (ce qui est évident), mais à cause de cela, il y a un léger alignement de décalage entre les en-têtes et les lignes. J'ai 7 colonnes, donc je l' ai mis en largeur à 14,28% après avoir calculé en utilisant la formule de mention
Chetan

1
Comment attribuer une certaine largeur à chaque colonne?
user1807271

@ user1807271 vous pouvez affecter la largeur de chaque colonne via JS, ou créer une classe par colonne (par exemple "col1", "col2" et ainsi de suite) avec la largeur dont vous avez besoin et affecter la classe "col1" à toutes les cellules de la première colonne , "col2" avec le second, etc.
Luke

4
Je vous suggère également d'ajouter .header-fixed > thead > tr > th{white-space: nowrap;}. Si les en-têtes commencent à envelopper, cela gâche les choses
tard le

1
C'est la seule solution qui a fonctionné pour moi, je devenais fou avec ce problème: DI utilise matérialiser et cette réponse m'a beaucoup aidé, en plus j'ai ajouté scrollbar-width: none;à tbody pour des raisons esthétiques
Angel

83

Voici la solution de travail:

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;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>

<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>
</table>

Lien vers jsfiddle


31
Ne fonctionne pas dans IE9 (et probablement dans d'autres); nécessite des colonnes à largeur fixe (et il existe des solutions beaucoup plus simples et multi-navigateurs si vous comptez utiliser des colonnes à largeur fixe); casse mal si le contenu dépasse la largeur fixe; n'aligne pas réellement les en-têtes et les colonnes (vous pouvez le voir dans le violon lié ci-dessus ; c'est plus clair dans cette version qui leur donne une bordure simple) bien que cela puisse probablement être corrigé; la barre de défilement n'est pas tout à fait alignée avec le corps de la table ...
TJ Crowder

ajoutez une bordure visible à td et th et vous verrez que la largeur de td ne correspond pas à la largeur de th
Apolo

2
Le problème avec cette solution est qu'elle nécessite une hauteur fixe. Cela ne fonctionnera pas là où le design réactif entre en jeu. J'ai travaillé sur une solution qui utilise position: fixed, ce qui résout le problème de défilement, mais gâche les largeurs de ligne.
Jeffrey A. Gochin

Vous pouvez corriger manuellement la largeur td ne correspondant pas à la largeur th en séparant la déclaration de largeur% pour le td & th et en définissant simplement le th comme étant légèrement plus étroit. Vous devrez le faire à chaque fois, mais ce n'est pas quelque chose qui devrait être utilisé aussi souvent.
Ben Hoffman

J'ai passé beaucoup de temps à jouer avec différentes solutions, puis je suis tombé sur ce plugin, qui fonctionne également avec les tables de bootstrap 3 (et bootstrap 4). mkoryak.github.io/floatThead/#intro
Drew

55

Mettre à jour

Pour une bibliothèque plus récente et toujours maintenue, essayez plutôt jquery.floatThead (comme mentionné par Bob Jordan dans le commentaire) .

Ancienne réponse

Ceci est une réponse très ancienne, la bibliothèque mentionnée ci-dessous n'est plus maintenue.

J'utilise StickyTableHeaders sur GitHub et cela fonctionne comme un charme!

J'ai dû ajouter ce CSS pour que l'en-tête ne soit pas transparent.

table#stickyHeader thead {
  border-top: none;
  border-bottom: none;
  background-color: #FFF;
}

9
Notez que le plugin stickyTableHeaders ne trouvera que du HTML qui se trouve dans la page lorsque le navigateur l'a chargé initialement, il ne récupérera pas le contenu généré dynamiquement
Rob Sedgwick

3
@RobSedgwick, je n'ai pas ceci, mais ça devrait quand même fonctionner. Tant que vous initialisez stickyTableHeadres APRÈS que la table est générée. Cela signifie que vous ne pouvez pas l'initialiser dans l'en-tête mais l'initialiser à la place juste après la fin du tableau généré dynamiquement.
Rosdi Kasim

1
Une solution fantastique. Très appréciée. Si quelqu'un a des problèmes pour rendre le fond opaque, je devais l'utiliser .tableFloatingHeaderOriginal { //css }.
Matt Inamdar

Merci d'avoir partagé ce plugin. Fonctionne très bien!
blazerunner44

1
Une bibliothèque alternative qui est activement maintenue à partir de 2017 -> github.com/mkoryak/floatThead
Bob Jordan

35

Pas besoin de l'envelopper dans une 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


Le position: absolutesur tbodyaidé !! Merci !!
Anish Nair

5
Cela a fière allure jusqu'à ce que vous réalisiez que les données de la colonne doivent avoir la même largeur. Sinon, les données ne rentrent pas sous les titres.
Tmac

Cette solution ne fonctionne pas lorsque les cellules individuelles débordent.
John Zabroski

1
cela ne fonctionne pas en chrome, que ce soit le bootply ou la solution.
kevinc

2
Juste pour commentaire, ça marche pour moi dans Chrome, le tableau est en haut au milieu du contenu de la page .... Pouvez-vous fournir plus d'informations? (Je suis sur Linux)
BENARD Patrick

23

C'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; }

1
Vous pouvez surmonter ce problème table-layout:fixeden ajoutant une classe CSS avec JavaScript
user2182349

Cela semble le plus intelligent, mais cela fonctionne-t-il partout?
Perry

Pour autant que je sache, c'est le cas.
S. Mert

14

Tard dans la soirée (Histoire de ma vie), mais comme c'est le premier résultat sur Google, et rien de ce qui précède ne m'a fait travailler, 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;
}

2
Cela a fonctionné pour moi, mais maintenant tout td a la même largeur. Ce que je ne veux pas.
shubhamkes

Tout simplement génial. Note latérale: th:nth-child(2), td:nth-child(2)équivaut àtr > :nth-child(2)
Washington Guedes

1 vote positif pour le commentaire décrivant à quoi la table "ressemblera à de la merde" si elle devient trop petite, m'a fait rire
Michael S. Miller

11

À 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 implémenté.

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>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,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>$86,000</td>
        </tr>
  </tbody>
</table>

JavaScript:

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

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

Mais le plus simple que vous puissiez avoir pour simplement faire défiler <tbody>est:

//configure table with fixed header and scrolling rows
$('#example').DataTable({
    scrollY: 400,
    scrollCollapse: true,
    paging: false,
    searching: false,
    ordering: false,
    info: false
});

Cela semble prometteur. Je vais implémenter cela plus tard dans la journée et voir comment cela a fonctionné pour moi.
Anthony

Merci, j'ai implémenté cela, et cela fonctionne parfaitement hors de la boîte. J'avais besoin d'une table exploitable qui pourrait être gérée à partir d'un appareil mobile, et c'est exactement ce qu'il fait. L'en-tête colle aussi.
Florida G.

je veux que la première colonne et l'en-tête soient fixés, ce qui n'est pas possible selon le tableau de compatibilité des tableaux de données
PirateApp

J'ai utilisé cela pour un effet assez décent. Cela semblait un peu saccadé dans certains cas, mais cela peut être mon inexpérience avec CSS.
David Bradley

5

La dernière position d'addition: «collant» serait la solution la plus simple ici

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

.outer table{
    width: 100%;
    table-layout: fixed; 
    border : 1px solid black;
    border-spacing: 1px;
}

.outer table th {
        text-align: left;
        top:0;
        position: sticky;
        background-color: white;  
}
 <div class = "outer">
 <table>
             <tr >
              <th>col1</th>
              <th>col2</th>
              <th>col3</th>
              <th>col4</th>
               <th>col5</th>
             <tr>
                       
            <tr >
              <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
               <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
                <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
                <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
                 <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
                 <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
 </table>
 </div>


1
charmant et utile
Miguel Ortiz

5

table {
    overflow-y: auto;
    height: 50vh;     /* !!!  HEIGHT MUST BE IN [ vh ] !!! */
}

thead th {
    position: sticky;
    top: 0;
}
   <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>
        <tr><td>F1</td><td>F2</td></tr>
        <tr><td>G1</td><td>G2</td></tr>
        <tr><td>H1</td><td>H2</td></tr>
        <tr><td>I1</td><td>I2</td></tr>
        <tr><td>J1</td><td>J2</td></tr>
        <tr><td>K1</td><td>K2</td></tr>
        <tr><td>L1</td><td>L2</td></tr>
        <tr><td>M1</td><td>M2</td></tr>
        <tr><td>N1</td><td>N2</td></tr>
        <tr><td>O1</td><td>O2</td></tr>
        <tr><td>P1</td><td>P2</td></tr>
        <tr><td>Q1</td><td>Q2</td></tr>
        <tr><td>R1</td><td>R2</td></tr>
        <tr><td>S1</td><td>S2</td></tr>
        <tr><td>T1</td><td>T2</td></tr>
        <tr><td>U1</td><td>U2</td></tr>
        <tr><td>V1</td><td>V2</td></tr>
        <tr><td>W1</td><td>W2</td></tr>
        <tr><td>X1</td><td>X2</td></tr>
        <tr><td>Y1</td><td>Y2</td></tr>
        <tr><td>Z1</td><td>Z2</td></tr>
      </tbody>
    </table>

Vous n'avez pas besoin de js. L'important est de définir la hauteur de la table en [ vh ]


3

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


2

Vous devriez essayer avec "display: block;" à tbody, parce que maintenant c'est inline-block et pour définir la hauteur, l'élément doit être "block"


display: block était nécessaire mais j'ai aussi dû mettre float: left et une bonne largeur pour toute la cellule. La solution que j'ai publiée fonctionne maintenant.
giulio

2

Ajoutez d'abord du balisage pour une table d'amorçage. Ici, j'ai créé une table rayée, mais j'ai également ajouté une classe de table personnalisée .table-scrollqui ajoute une barre de défilement verticale à la table et rend l'en-tête de table fixe lors du défilement 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;
}

2

J'ai utilisé le plugin floatThead jQuery ( https://mkoryak.github.io/floatThead/#intro )

les documents disent que cela fonctionne avec les tables Bootstrap 3 et je peux dire que cela fonctionne aussi avec les tables Bootstrap 4 avec ou sans l'aide sensible aux tables.

L'utilisation du plugin est aussi simple que cela:

HTML (balisage du tableau d'amorçage vanilla)

<div class="table-responsive">
   <table id="myTable" class="table table-striped">
        <thead>...</thead>
        <tbody>...</tbody>
   </table>
</div>

Initialisation du plugin:

$(document).ready(function() {
    var tbl=$('#myTable');
    tbl.floatThead({
        responsiveContainer: function(tbl) {
            return tbl.closest('.table-responsive');
        }
    });
});

Clause de non-responsabilité complète: je ne suis en aucun cas associé au plugin. Je l'ai trouvé après des heures à essayer de nombreuses autres solutions publiées ici et ailleurs.


1
C'est un excellent plugin! Avertissement complet: je l'ai écrit.
mkoryak

1

Pour tout ce que ça vaut maintenant: j'ai posté une solution à un défilement de tableau de threads frères avec HTML et CSS qui

  • prend deux tableaux (un pour seul en-tête, un pour tous - mis en page par le navigateur)
  • après la mise en page, ajustez la table supérieure (en-tête uniquement) aux largeurs de la table inférieure
  • cacher ( visibility, pas display) l'en-tête du tableau inférieur et faire défiler le tableau inférieur w / dans un div

La solution est indépendante de tous les styles / cadres utilisés - alors peut-être qu'elle est utile ici aussi ...

Une longue description est dans le défilement du tableau avec HTML et CSS / le code est également dans ce stylo: https://codepen.io/sebredhh/pen/QmJvKy


1

Pour les tables pleine hauteur (la page défile, pas la table)

Remarque: je déplace toute la <thead>...</thead>beause Dans mon cas, j'avais deux lignes (titre et filtres)

Avec JS (jQuery)

$( function() {

            let marginTop = 0; // Add margin if the page has a top nav-bar
            let $thead = $('.table-fixed-head').find('thead');
            let offset = $thead.first().offset().top - marginTop;
            let lastPos = 0;

            $(window).on('scroll', function () {

                if ( window.scrollY > offset )
                {
                    if ( lastPos === 0 )
                    {
                        // Add a class for styling
                        $thead.addClass('floating-header');
                    }

                    lastPos = window.scrollY - offset;
                    $thead.css('transform', 'translateY(' + ( lastPos ) + 'px)');
                }
                else if ( lastPos !== 0 )
                {
                    lastPos = 0;
                    $thead.removeClass('floating-header');
                    $thead.css('transform', 'translateY(' + 0 + 'px)');
                }
            });
});

CSS (juste pour le style)

 thead.floating-header>tr>th {
       background-color: #efefef;
 }

thead.floating-header>tr:last-child>th {
       border-bottom: 1px solid #aaa;
}

1

Maintenant que «tous» les navigateurs prennent en charge ES6, j'ai incorporé les diverses suggestions ci-dessus dans une classe JavaScript qui prend un tableau en argument et fait défiler le corps. Il permet au moteur de présentation du navigateur de déterminer les largeurs des cellules d'en-tête et de corps, puis fait correspondre les largeurs de colonne.

La hauteur d'une table peut être définie explicitement ou remplie pour remplir la partie restante de la fenêtre du navigateur et fournit des rappels pour des événements tels que le redimensionnement de la fenêtre et / ou l' detailsouverture ou la fermeture d'éléments.

La prise en charge des en-têtes à plusieurs lignes est disponible et est particulièrement efficace si la table utilise les attributs id / headers pour l'accessibilité, comme spécifié dans les directives WCAC , ce qui n'est pas une exigence aussi onéreuse que cela puisse paraître.

Le code ne dépend d'aucune bibliothèque, mais joue bien avec elles si elles sont utilisées. (Testé sur les pages qui utilisent JQuery).

Le code et l'exemple d'utilisation sont disponibles sur Github .


0

Vous pouvez placer deux div où la 1ère div (en-tête) aura une barre de défilement transparente et la 2ème div aura des données avec une barre de défilement visible / automatique. L'échantillon contient un extrait de code angulaire pour parcourir les données.

Le code ci-dessous a fonctionné 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 masquer 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

Voici mon stylo copen sur la façon de créer un en-tête de tableau fixe avec des lignes et des colonnes défilables. Les colonnes ont également été à 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; } 


0

Solution plus propre (CSS uniquement)

.table-fixed tbody {
    display:block;
    height:85vh;
    overflow:auto;
}
.table-fixed thead, .table-fixed tbody tr {
    display:table;
    width:100%;
}


<table class="table table-striped table-fixed">
    <thead>
        <tr align="center">
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 1</td>
            <td>Content 1</td>
            <td>Content 1</td>
        </tr>
        <tr>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
        </tr>
    </tbody
</table

0

Prise en charge de plusieurs tables déroulantes dans une seule fenêtre.

CSS pur et non fixe ou collant.

Je recherche l'en-tête de table fixe avec une largeur "td" et "th" automatique depuis des années. Enfin j'ai codé quelque chose, ça marche bien pour moi mais je ne suis pas sûr que ça marche bien pour tout le monde.

Problème 1: Nous ne pouvons pas définir la hauteur de la table ou du corps alors que nous avons des tonnes de "tr" c'est à cause des propriétés de table par défaut.

Solution: définissez une propriété d'affichage sur la table.

Problème 2: Lorsque nous définissons une propriété d'affichage, la largeur des éléments "td" ne peut pas être égale à la largeur des éléments "th". Et il est difficile de remplir correctement les éléments dans un tableau pleine largeur comme 100%.

Solution: CSS "flex" est une très bonne solution pour les configurations de largeur et de remplissage, nous allons donc construire nos éléments tbody et thead avec CSS "flex".

.ea_table {
  border: 1px solid #ddd;
  display: block;
  background: #fff;
  overflow-y: hidden;
  box-sizing: border-box;
  float: left;
  height:auto;
  width: 100%;
}

.ea_table tbody, thead {
  flex-direction: column;
  display: flex;
}

.ea_table tbody {
  height: 300px;
  overflow: auto;
}

.ea_table thead {
  border-bottom: 1px solid #ddd;
}

.ea_table tr {
  display: flex;
}


.ea_table tbody tr:nth-child(2n+1) {
  background: #f8f8f8;
  }

.ea_table td, .ea_table th {
  text-align: left;
  font-size: 0.75rem;
  padding: 1.5rem;
  flex: 1;
}
<table class="ea_table">
    <thead>
      <tr>
        <th>Something Long</th>
        <th>Something </th>
        <th>Something Very Long</th>
        <th>Something Long</th>
        <th>Some</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>

    </tbody>

  </table>

jsfiddle


0
<style>

thead, tbody
{
    display: block;
}

tbody 
{
   overflow: auto;
   height: 100px;
}

th,td
{
    width: 120px;
}

</style>

<table class="table table-bordered table-striped">
    <thead style="background-color:lightgreen">
        <tr>
            <th>Id</th><th>Name</th><th>Roll</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
    </tbody>
</table>

-1

Utilisé ce lien, stackoverflow.com/a/17380697/1725764 , par Hashem Qolami dans les commentaires des articles d'origine et utilisé l'affichage: blocs en ligne au lieu de flotteurs. Fixe les bordures si la table a également la classe 'bordé par table'.

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
  }
}

Il suffit ensuite d'ajouter les largeurs des 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%;
  }
}

-1

J'ai fait une sorte de solution CSS qui fonctionne un peu en utilisant position: sticky. Devrait fonctionner sur les navigateurs à feuilles persistantes. Essayez de redimensionner le navigateur. Il y a toujours un problème de mise en page dans FF, le corriger plus tard, mais au moins les en-têtes de table gèrent le défilement vertical et horizontal. Exemple de Codepen


-1

HTML

<!DOCTYPE html>
<html>
<head>
    <title>RoboPage</title>
    <link rel="stylesheet" type="text/css" href="practice.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>
<body>

        <div class="container">
                <table class="table">
                  <thead>
                    <tr>
                      <th class="col-md-3 col-sm-3 ">First Name</th>
                      <th class="col-md-3 col-sm-3 ">Last Name</th>
                      <th class="col-md-6 col-sm-6 ">E-mail</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="col-md-3 col-sm-3">Top Row</td>
                      <td class="col-md-3 col-sm-3">Doe</td>
                      <td class="col-md-6 col-sm-6">johndoe@email.com</td>
                    </tr>

                    <tr>
                      <td class="col-md-3 col-sm-3">John</td>
                      <td class="col-md-3 col-sm-3">Doe</td>
                      <td class="col-md-6 col-sm-6">johndoe@email.com</td>
                    </tr>
                    <tr>
                      <td class="col-md-3 col-sm-3">John</td>
                      <td class="col-md-3 col-sm-3">Doe</td>
                      <td class="col-md-6 col-sm-6">johndoe@email.com</td>
                    </tr>
                    <tr>
                      <td class="col-md-3 col-sm-3">John</td>
                      <td class="col-md-3 col-sm-3">Doe</td>
                      <td class="col-md-6 col-sm-6">johndoe@email.com</td>
                    </tr>
                    <tr>
                      <td class="col-md-3 col-sm-3">John</td>
                      <td class="col-md-3 col-sm-3">Doe</td>
                      <td class="col-md-6 col-sm-6">johndoe@email.com</td>
                    </tr>
                    <tr>
                      <td class="col-md-3 col-sm-3">John</td>
                      <td class="col-md-3 col-sm-3">Doe</td>
                      <td class="col-md-6 col-sm-6">johndoe@email.com</td>
                    </tr>
                  </tbody>
                </table>
              </div>


<script src='practice.js'></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

CSS

thead,tbody,tr,td,th{
    display:block;
}
tbody{
    height:200px;
    overflow-y:auto;
    width: 100%;
}
thead > tr > th, tbody > tr > td{
    float:left;
}

-1

Un moyen simple sans largeur fixe:

.myTable tbody{
  display:block;
  overflow:auto;
  height:200px;
  width:100%;
}
.myTable thead tr{
  display:block;
}

La source

Maintenant, sur onLoad, pour ajuster les largeurs, ajoutez simplement ce script jquery:

$.each($('.myTable tbody tr:nth(0) td'), function(k,v) {
    $('.myTable thead th:nth('+k+')').css('width', $(v).css('width'));
});

-2

placez le tableau à l'intérieur du div comme ceci pour faire un tableau déroulant verticalement. changer overflow-ypour overflow-xfaire défiler le tableau horizontalement. juste overflowpour faire défiler le tableau horizontalement et verticalement.

<div style="overflow-y: scroll;"> 
    <table>
    ...
    </table>
</div>

-2

table {

    display: block;
}

thead, tbody {
    display: block;
}
tbody {
    position: absolute;
    height: 150px;
    overflow-y: scroll;
}
td, th {
    min-width: 100px !important;
    height: 25px !important;
    overflow:hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="container" style="position:fixed;height:180px;overflow-x:scroll;overflow-y:hidden">


<table>
         <thead>
        <tr>
             <th>Col1</th>
            <th>Col2</th>
            <th>Username</th>
            <th>Password</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Col16</th>
            <th>Col7</th>
            <th>Col8</th>
            <th>Col9</th>
            <th>Col10</th>
            <th>Col11</th>
            <th>Col12</th>
            <th>Col13</th>
            <th>Col14</th>
            <th>Col15</th>
            <th>Col16</th>
            <th>Col17</th>
            <th>Col18</th>
        </tr>
              </thead>
         <tbody>
         </tbody>
          <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
         </table>



</div>`enter code here`

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.