css - plantillas - tablas dinamicas bootstrap

¿Cómo pegar el encabezado de la tabla(thead) en la parte superior mientras se desplaza hacia abajo en las filas de la tabla con el encabezado fijo(barra de navegación) en bootstrap? (6)

Diseño bootstrap con fixed-navbar . Teniendo mesa con tantas filas en cuerpo.

¿Problema? Al desplazarme, la barra de navegación de la página estará allí porque está fija. a medida que me desplazo más, quiero que el encabezado de la tabla se fije bajo la barra de navegación y que el contenido de la tabla (tabla-cuerpo) se desplace sin la barra de desplazamiento.

Algo como esto - Codepen

** Fiddle ** Bootstrap table

Trabajando Fiddle después de referirse a la respuesta!

HTML

<div id="wrap">  <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> </div> </div>  <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>

Aquí hay un jsfiddle HERE (no creado por mí) que hace lo que está buscando con css puro en una tabla. Lo que hay que tener en cuenta aquí es que el encabezado th se establece en una altura de 0. Dentro de cada th está el div posicionado absoluto que coloca el encabezado sobre la tabla y el div que se puede desplazar en el que se encuentra la tabla.

Esto ahora se puede hacer sin JS, solo CSS puro. Por lo tanto, cualquier persona que intente hacer esto para los navegadores modernos debería considerar el uso de position: sticky .

Actualmente, tanto Edge como Chrome tienen un error donde position: sticky no funciona en los elementos thead o tr , sin embargo, es posible usarlo en th elementos, así que todo lo que necesita hacer es agregar esto a su código:

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

Nota: necesitará un color de fondo para ellos, o podrá ver a través de la barra de título pegajosa.

Esto tiene muy buen soporte de navegador .

Demostración con su código (HTML inalterado, más de 5 líneas de CSS agregadas, todo JS eliminado):

th { position: sticky; top: 50px; background: white; }

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

Logré algo similar usando jQuery Waypoints .

Hay muchas partes móviles y bastante lógica (que espero poder usar GitHub algún día pronto), pero esencialmente lo que podría hacer es ...

Duplique la estructura de la tabla DOM en JavaScript y agregue una clase llamada fixed .
Agrega estilos para table.fixed que lo hacen invisible.
Establezca un punto de ruta en la parte inferior de la navegación de encabezado que agregue una clase llamada sticky to table.fixed
Agregue estilos para table.sticky.fixed esa posición justo debajo de la barra de navegación y también hace que solo se thead contenido de thead . Esto también tiene un z-index lo que se coloca por encima del resto del contenido.
Agregue otro punto de ruta, pero en el evento de desplazamiento hacia abajo, que elimina .sticky de la table.fixed

Tiene que duplicar toda la tabla DOM para garantizar que los anchos de columna se alineen correctamente.

Si eso suena realmente complicado, puede intentar jugar con el complemento DataTables y la extensión FixedHeader: https://datatables.net/extensions/fixedheader/

Para cualquiera que busque esta funcionalidad en 2018, es mucho más limpio hacerlo con solo CSS usando position: sticky.

posición: sticky no funciona con algunos elementos de la tabla (thead / tr) en Chrome. Puede mover pegajoso a tds / ths de tr que necesita ser pegajoso. Me gusta esto:

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

Puede hacerlo fácilmente con puse CSS sin ningún tipo de JS. Tienes que añadir position: sticky; top: 0; z-index:999; position: sticky; top: 0; z-index:999; en la table th . Pero esto no funcionará en el navegador Chrome sino en otro navegador Para trabajar en Chrome tienes que agregar esos códigos en la 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>

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

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

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

DEMO con 2 tablas y encabezado fijo: http://jsbin.com/zuzuqe/1/

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

HTML

<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> </div> </div>  <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; }