Comment coller l'en-tête du tableau (thead) en haut tout en faisant défiler les lignes du tableau avec l'en-tête fixe (barre de navigation) dans le bootstrap?

Question

Bootstrap layout avec fixed-navbar. Avoir une table avec autant de lignes dans le corps.

Problème? Lorsque je ferai défiler la page, la barre de navigation sera présente car elle est corrigée. en faisant défiler davantage, je veux que l'en-tête du tableau soit fixé sous la barre de navigation et que le contenu du tableau (corps-table) défile sans barre de défilement!

Quelque chose comme ça - Codepen

** Fiddle ** Table Bootstrap

Travailler Fiddle après avoir référé à la réponse!

HTML

<!-- Wrap all page content here --> <div id="wrap"> <!-- Fixed navbar --> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div> </div> <!-- Begin page content --> <div class="container"> <div class="page-header"> <h1>Sticky footer with fixed navbar</h1> </div> <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p> </div> <table class="table"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@Twitter</td> </tr> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@Twitter</td> </tr> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@Twitter</td> </tr> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@Twitter</td> </tr> </tbody> </table> </div> <div id="footer"> <div class="container"> <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p> </div> </div>

Christina · Accepted Answer

Utilisez: https://github.com/mkoryak/floatThead

Docs: http://mkoryak.github.io/floatThead/examples/bootstrap3/

$(document).ready(function(){ $(".sticky-header").floatThead({top:50}); });

DEMO avec 2 tables et en-tête fixe: http://jsbin.com/zuzuqe/1/

_ { http://jsbin.com/zuzuqe/1/edit

HTML

 <!-- Fixed navbar --> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div> </div> <!-- Begin page content --> <div class="container"> <div class="page-header"> <h1>Sticky footer with fixed navbar</h1> </div> <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p> <table class="table table-striped sticky-header"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@Twitter</td> </tr> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@Twitter</td> </tr> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@Twitter</td> </tr> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@Twitter</td> </tr> </tbody> </table> <h3>Table 2</h3> <table class="table table-striped sticky-header"> <thead> <tr> <th>#</th> <th>New Table</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@Twitter</td> </tr> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@Twitter</td> </tr> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@Twitter</td> </tr> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@Twitter</td> </tr> </tbody> </table> </div>

CSS

body{ padding-top:50px; } table.floatThead-table { border-top: none; border-bottom: none; background-color: #fff; }

Okku · Answer

Cela peut maintenant être fait sans JS, juste du CSS pur. Ainsi, toute personne essayant de faire cela pour les navigateurs modernes devrait envisager d'utiliser position: sticky à la place.

Actuellement, les deux Edge et Chrome ont un bogue où position: sticky ne fonctionne pas sur les éléments thead ou tr, mais il est possible de l'utiliser sur des éléments th. votre code:

th { position: sticky; top: 50px; /* 0px if you don't have a navbar, but something is required */ background: white; }

Remarque: vous aurez besoin d’une couleur d’arrière-plan ou vous pourrez voir à travers la barre de titre adhésive.

Cela a très bon support du navigateur .

Démo avec votre code (HTML non modifié, plus de 5 lignes de CSS ajoutées, tous les fichiers JS supprimés):

body { padding-top:50px; } table.floatThead-table { border-top: none; border-bottom: none; background-color: #fff; } th { position: sticky; top: 50px; background: white; }

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <!-- Fixed navbar --> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a> </li> <li><a href="#about">About</a> </li> <li><a href="#contact">Contact</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a> </li> <li><a href="#">One more separated link</a> </li> </ul> </li> </ul> </div> <!--/.nav-collapse --> </div> </div> <!-- Begin page content --> <div class="container"> <div class="page-header"> <h1>Sticky Table Headers</h1> </div> <p class="lead">If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p> <p class="lead">If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p> <p class="lead">If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p> <table class="table table-striped sticky-header"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@Twitter</td> </tr> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@Twitter</td> </tr> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@Twitter</td> </tr> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@Twitter</td> </tr> </tbody> </table> <p class="lead">If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p> <p class="lead">If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p> <p class="lead">If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p> <p class="lead">If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p> <p class="lead">If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p> <p class="lead">If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p> <p class="lead">If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p> <h3>Table 2</h3> <table class="table table-striped sticky-header"> <thead> <tr> <th>#</th> <th>New Table</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@Twitter</td> </tr> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@Twitter</td> </tr> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@Twitter</td> </tr> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@Twitter</td> </tr> </tbody> </table> </div>

J.McLaren · Answer

Pour ceux qui recherchent cette fonctionnalité en 2018, il est beaucoup plus simple de le faire avec juste CSS utilisant position: sticky.

position: sticky ne fonctionne pas avec certains éléments de table (thead/tr) dans Chrome. Vous pouvez rester collant aux mots que vous devez être collants. Comme ça:

thead tr:nth-child(1) th { background: white; position: sticky; top: 0; z-index: 10; }

Shahriyar Ahmed · Answer

Vous pouvez le faire facilement avec CSS puse sans aucune sorte de JS. vous devez ajouter position: sticky; top: 0; z-index:999; dans table th. Mais cela ne fonctionnera pas avec le navigateur Chrome, mais avec un autre navigateur. Pour travailler sur chrome, vous devez ajouter ce code dans table thead th

.table-fixed { width: 100%; } /*This will work on every browser but Chrome Browser*/ .table-fixed thead { position: sticky; position: -webkit-sticky; top: 0; z-index: 999; background-color: #000; color: #fff; } /*This will work on every browser*/ .table-fixed thead th { position: sticky; position: -webkit-sticky; top: 0; z-index: 999; background-color: #000; color: #fff; }

<table class="table-fixed"> <thead> <tr> <th>Table Header 1</th> <th>Table Header 2</th> <th>Table Header 3</th> </tr> </thead> <tbody> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </tbody> </table>

Chris Barlow · Answer

Voici un jsfiddle ICI (non créé par moi) qui fait ce que vous recherchez avec du CSS pur dans un tableau. La chose à noter ici est que l'en-tête th est défini sur une hauteur de 0. À l'intérieur de chaque div est positionné et absolu qui place l'en-tête au-dessus du tableau et le div scollable dans lequel se trouve le tableau.

<thead> <tr> <th>#<div>#</div></th> <th>First Name<div>First Name</div></th> <th>Last Name<div>Last Name</div></th> <th>Username<div>Username</div></th> </tr> </thead>

Quantastical · Answer

J'ai accompli quelque chose de similaire en utilisant jQuery Waypoints .

Il y a beaucoup de parties en mouvement et un peu de logique (que j'espère bientôt voir sur GitHub), mais ce que vous pourriez faire, c'est essentiellement ...

Dupliquez la structure DOM de la table en JavaScript et ajoutez une classe appelée fixed.
Ajoutez des styles pour table.fixed qui le rendent invisible.
Définissez un point de passage au bas de la navigation en-tête qui ajoute une classe appelée sticky à table.fixed
Ajoutez des styles pour table.sticky.fixed qui le placent juste en dessous de la barre de navigation et rendez également visible le contenu thead. Cela a aussi un z-index donc il est posé au-dessus du reste du contenu.
Ajouter un autre point de passage, mais dans l'événement de défilement vers le bas, qui supprime .sticky du table.fixed

Vous devez dupliquer l'intégralité du DOM de la table afin de vous assurer que la largeur des colonnes est correctement alignée.

Si cela semble vraiment compliqué, vous pouvez essayer de jouer avec le plugin DataTables et l'extension FixedHeader: https://datatables.net/extensions/fixedheader/

Joffrey Berrier · Answer

Si vous voulez avoir un affixe sur votre en-tête, vous pouvez utiliser cette astuce, ajouter position: relatif sur votre th et changer la position dans eventListener ('scroll')

J'ai créé un exemple: https://codesandbox.io/s/rl1jjx0o

J'utilise vue.js mais vous pouvez l'utiliser sans vue.js