Encabezado fijo de tabla y cuerpo desplazable


260

Estoy tratando de hacer una tabla con un encabezado fijo y un contenido desplazable usando la tabla bootstrap 3. Lamentablemente, las soluciones que he encontrado no funcionan con bootstrap ni alteran el estilo.

Aquí hay una tabla de arranque simple, pero por alguna razón, para mí, desconocido, la altura del cuerpo no es de 10px.

height: 10px !important; overflow: scroll;

Ejemplo:

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



Esto definitivamente me ayudó. Aquí la solución jsfiddle.net/T9Bhm/7 Gracias
giulio

No maneja correctamente el atributo con rayas de tabla cuando td heights no coincide. jsfiddle.net/T9Bhm/4755 Vea el td {overflow-wrap: break-word agregado; } que agregué
John Zabroski

Respuestas:


257

Cabezal de mesa fijo: solo CSS

Simplemente position: sticky; top: 0;tus thelementos. (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>

TH limita problema solucionado

Como borderno se puede pintar correctamente en un THelemento traducido , para recrear y renderizar "bordes" use la box-shadowpropiedad:

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


Cabezal de mesa fijo - usando JS. (ES DECIR)

Puedes usar un poco de JS y traducir los thelementos

Ejemplo de jQuery

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

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

O simplemente ES6 si lo prefiere (no se requiere jQuery):

// 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
¡Guau, esta es la mejor opción con el menor gasto general! Y también funciona con overflow-x fuera de la caja.
Deseo

1
¡si! funciona incluso con ancho de celdas variable (No es necesario codificar anchos de celdas como en otros ejemplos) @Wish
Roko C. Buljan

2
Gran solución! Gracias
Dmitry Nichiporenko

2
Descubrí que esto funciona en Chrome y Firefox, pero los encabezados no se solucionarán en Edge o IE11 con este enfoque.
Jeff

2
@PussInBoots en los ejemplos anteriores? ¿Cromo? Nada salta
Roko C. Buljan

88

Probablemente obtendrá varias tablas en una página, por lo tanto, necesita clases de CSS. Encuentre una solución de @ giulio modificada para eso.

Solo declaralo en la tabla:

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

Tenga en cuenta que la implementación actual se adapta solo a cinco columnas. Si necesita un número diferente, cambie el parámetro de ancho de 20% a * 100% / number_of_columns *.


3
Después de seguir todas las diferentes soluciones complejas, encuentro que esta es la mejor solución. Sin embargo, la barra de desplazamiento vertical tiene cierto ancho (lo cual es obvio), pero debido a esto existe una ligera alineación de desajuste entre los encabezados y las filas. Tengo 7 columnas, así que configuré el ancho en 14.28% después de calcular usando la fórmula de mención
Chetan

1
¿Cómo asignaría un cierto ancho a cada columna?
user1807271

@ user1807271 puede asignar el ancho de cada columna a través de JS, o crear una clase por columna (por ejemplo, "col1", "col2", etc.) con el ancho que necesita y asignar la clase "col1" a todas las celdas de la primera columna , "col2" con el segundo, etc.
Lucas

44
Te sugiero que agregues .header-fixed > thead > tr > th{white-space: nowrap;}también. Si los encabezados comienzan a
ajustarse, las

1
Esta es la única solución que me ha funcionado, me estaba volviendo loco con este problema: estoy usando materializar y esta respuesta me ha ayudado mucho, además, he agregado scrollbar-width: none;a tbody por razones estéticas
Angel

83

Aquí está la solución de trabajo:

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>

Enlace a jsfiddle


31
No funciona en IE9 (y probablemente en otros); requiere columnas de ancho fijo (y hay soluciones mucho más simples y más cruzadas para el navegador si va a usar columnas de ancho fijo); se rompe mal si el contenido excede el ancho fijo; en realidad no alinea los encabezados y las columnas (puede verlo en el violín vinculado anteriormente ; es más claro en esta versión que les da un borde simple) aunque eso probablemente podría solucionarse; la barra de desplazamiento no está completamente alineada con el cuerpo de la mesa ...
TJ Crowder

agregue un borde visible a td y th y verá que el ancho de td no coincide con el ancho de th
Apolo

2
El problema con esta solución es que requiere una altura fija. Eso no va a funcionar donde entra el diseño receptivo. He estado trabajando en una solución que usa position: fixed, que resuelve el problema de desplazamiento, pero desordena los anchos de fila.
Jeffrey A. Gochin

Puede corregir manualmente el ancho de td que no coincide con el ancho de th separando la declaración de% de ancho para td & th y simplemente estableciendo que th sea un poco más estrecho. Deberá hacerlo personalizado cada vez, pero esto no es algo que deba usarse con tanta frecuencia.
Ben Hoffman

Pasé mucho tiempo jugando con varias soluciones y luego me topé con este complemento, que también funciona con las tablas bootstrap 3 (y bootstrap 4). mkoryak.github.io/floatThead/#intro
Drew

55

Actualizar

Para una biblioteca más nueva y aún mantenida, intente jquery.floatThead (como mencionó Bob Jordan en el comentario) .

Vieja respuesta

Esta es una respuesta muy antigua, la biblioteca mencionada a continuación ya no se mantiene.

Estoy usando StickyTableHeaders en GitHub y funciona de maravilla .

Sin embargo, tuve que agregar este CSS para que el encabezado no sea transparente.

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

99
Tenga en cuenta que el complemento stickyTableHeaders solo encontrará el html que está en la página cuando el navegador lo cargó inicialmente, no recogerá el contenido generado dinámicamente
Rob Sedgwick

3
@RobSedgwick, no tengo esto, pero aún debería funcionar. Siempre que inicialice stickyTableHeadres DESPUÉS de que se genere la tabla. Lo que significa que no puede inicializarlo en la cabeza, sino que lo inicializa justo después de completar la tabla generada dinámicamente.
Rosdi Kasim

1
Fantástica solución. Muy apreciado. Si alguien tiene problemas para opacar el fondo, tuve que usarlo .tableFloatingHeaderOriginal { //css }.
Matt Inamdar

Gracias por compartir este complemento. ¡Funciona genial!
blazerunner44

1
Una biblioteca alternativa que se mantiene activamente a partir de 2017 -> github.com/mkoryak/floatThead
Bob Jordan

35

No necesito envolverlo en un div ...

CSS :

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

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

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


El position: absoluteen tbodyayudó! Gracias !!
Anish Nair

55
Esto se ve muy bien hasta que te das cuenta de que los datos de la columna deben ser del mismo ancho. Si no, entonces los datos no caben debajo de los encabezados.
Tmac

Esta solución no funciona cuando las células individuales se desbordan.
John Zabroski

1
Esto no funciona en Chrome, ya sea el bootply o la solución.
kevinc

2
Solo para comentar, funciona para mí en Chrome, la tabla está en la parte superior central del contenido de la página ... ¿Puede proporcionar más información? (Estoy en Linux)
BENARD Patrick

23

Es más fácil con css

table tbody { display:block; max-height:450px; overflow-y:scroll; }
table thead, table tbody tr { display:table; width:100%; table-layout:fixed; }

1
Puede superarlo table-layout:fixedagregando una clase CSS con JavaScript
user2182349

Esto parece el más inteligente, pero ¿funciona en todas partes?
Perry

Que yo sepa, lo hace.
S. Mert

14

Tarde a la fiesta (Historia de mi vida), pero como este es el primer resultado en Google, y ninguno de los anteriores me puso a trabajar, aquí está mi código

/*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
Funcionó para mí, pero ahora todo td tiene el mismo ancho. Lo cual no quiero.
shubhamkes

Simplemente sorprendente. Nota al margen: th:nth-child(2), td:nth-child(2)es equivalente atr > :nth-child(2)
Washington Guedes

Un voto a favor por el comentario que describe cómo la mesa "se verá como basura" si se vuelve demasiado pequeña, me hizo reír
Michael S. Miller

11

En mi opinión, uno de los mejores complementos para jQuery es DataTables .

También tiene una extensión para encabezado fijo , y se implementa muy fácilmente.

Tomado de su sitio:

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

Pero lo más simple que puede tener para hacer un desplazamiento <tbody>es:

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

Parece prometedor. Voy a implementar esto más tarde hoy y veré cómo me funcionó.
Anthony

Gracias, implementé esto, y funciona perfectamente fuera de la caja. Necesitaba una tabla viable que pudiera administrarse desde un dispositivo móvil, y hace exactamente eso. El encabezado se pega también.
Florida G.

Quiero que se arreglen tanto la primera columna como el encabezado, lo que no es posible según el cuadro de compatibilidad de tablas de datos
PirateApp

Usé esto con un efecto bastante decente. Parecía un poco retorcido en algunos casos, pero esa puede ser mi inexperiencia con CSS.
David Bradley

5

La última posición de adición: 'pegajosa' sería la solución más simple aquí

.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
encantador y útil
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>

No necesitas js. Importante es establecer la altura de la mesa en [ vh ]


3

Tuve muchos problemas para que funcionara la biblioteca stickytableheaders. Haciendo un poco más de búsqueda, encontré que floatThead es una alternativa mantenida activamente con actualizaciones recientes y una mejor documentación.


2

Deberías probar con "display: block;" a tbody, porque ahora es bloque en línea y para establecer la altura, el elemento debe ser "bloque"


display: block era necesario pero también tuve que poner float: left y un ancho adecuado para toda la celda. La solución que he publicado ahora está funcionando.
giulio

2

Primero agregue algo de marcado para una tabla de arranque. Aquí creé una tabla rayada pero también agregué una clase de tabla personalizada .table-scrollque agrega una barra de desplazamiento vertical a la tabla y hace que el encabezado de la tabla sea fijo mientras se desplaza hacia abajo.

<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

Usé el complemento floatThead jQuery ( https://mkoryak.github.io/floatThead/#intro )

los documentos dicen que funciona con las tablas Bootstrap 3 y puedo decir que también funciona con las tablas Bootstrap 4 con o sin el asistente de respuesta a la tabla.

Usar el complemento es tan simple como esto:

HTML (marcado de tabla de arranque de vainilla)

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

Inicialización del complemento:

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

Descargo de responsabilidad completo: no estoy asociado con el complemento de ninguna manera. Lo encontré después de horas de probar muchas otras soluciones publicadas aquí y en otros lugares.


1
Este es un gran complemento! Descargo de responsabilidad completo: lo escribí.
mkoryak

1

Para lo que sea que valga la pena ahora: publiqué una solución para un desplazamiento de tabla de subprocesos hermanos con HTML y CSS que

  • toma dos tablas (una solo para el encabezado, una para todas, diseñada por el navegador)
  • después del diseño, ajuste la tabla superior (solo encabezado) a los anchos de la inferior
  • ocultar ( visibility, no display) el encabezado de la tabla inferior y hacer que la tabla inferior se pueda desplazar con un div

La solución es independiente de cualquier estilo / marco utilizado, por lo que quizás también sea útil aquí ...

Una descripción larga está en el Desplazamiento de tabla con HTML y CSS / el código también está en este bolígrafo: https://codepen.io/sebredhh/pen/QmJvKy


1

Para tablas de altura completa (la página se desplaza, no la tabla)

Nota: muevo todo <thead>...</thead>porque en mi caso tenía dos filas (Título y filtros)

Con 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 (solo para diseñar)

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

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

1

Ahora que "todos" los navegadores admiten ES6, he incorporado las diversas sugerencias anteriores en una clase de JavaScript que toma una tabla como argumento y hace que el cuerpo se pueda desplazar. Permite que el motor de diseño del navegador determine el ancho de las celdas del encabezado y el cuerpo, y luego hace que los anchos de las columnas coincidan entre sí.

La altura de una tabla se puede establecer explícitamente o hacer que llene la parte restante de la ventana del navegador, y proporciona devoluciones de llamada para eventos como el cambio de tamaño de la ventana gráfica y / o la detailsapertura o cierre de elementos.

El soporte de encabezado de varias filas está disponible, y es especialmente efectivo si la tabla usa los atributos id / encabezados para accesibilidad como se especifica en las Directrices WCAC , lo cual no es un requisito tan oneroso como podría parecer.

El código no depende de ninguna biblioteca, pero juega muy bien con ellas si se están utilizando. (Probado en páginas que usan JQuery).

El código y el uso de muestra están disponibles en Github .


0

Puede colocar dos div donde el primer div (Encabezado) tendrá una barra de desplazamiento transparente y el segundo div tendrá datos con la barra de desplazamiento visible / automática. La muestra tiene un fragmento de código angular para recorrer los datos.

El siguiente código funcionó para mí:

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

Estilo adicional para ocultar la barra de desplazamiento del encabezado:

<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

Aquí está mi bolígrafo copen sobre cómo hacer un encabezado de tabla fijo con filas y columnas desplazables. Las columnas también tienen ancho fijo, 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

Solución más limpia (solo CSS)

.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

Soporte de múltiples tablas desplazables en una sola ventana.

CSS puro y no fijo o pegajoso.

Estoy buscando encabezado de tabla fijo con auto "td" y "th" ancho durante años. Finalmente codifiqué algo, funciona bien para mí, pero no estoy seguro de que funcione bien para todos.

Problema 1: No podemos establecer la altura de la tabla o del cuerpo mientras tenemos toneladas de "tr" debido a las propiedades predeterminadas de la tabla.

Solución: establezca la tabla como una propiedad de visualización.

Problema 2: cuando establecemos una propiedad de visualización, el ancho de los elementos "td" no puede ser igual al ancho de los elementos "th". Y es difícil llenar elementos correctamente en una tabla de ancho completo como 100%.

Solución: CSS "flex" es una muy buena solución para configuraciones de ancho y relleno, por lo que construiremos nuestros elementos tbody y thead con 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

Usé este enlace, stackoverflow.com/a/17380697/1725764 , por Hashem Qolami en los comentarios de las publicaciones originales y usé display: bloques en línea en lugar de flotantes. Corrige los bordes si la tabla también tiene la clase 'table -bordered'.

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

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

Luego solo agregue los anchos de td y 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

Hice alguna solución de CSS un poco funcional usando position: sticky. Debería funcionar en navegadores de hoja perenne. Intenta cambiar el tamaño del navegador. Todavía tengo algún problema de diseño en FF, lo solucionará más tarde, pero al menos los encabezados de tabla manejan el desplazamiento vertical y horizontal. Ejemplo 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

Una manera fácil sin ancho fijo:

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

Fuente

Ahora, en onLoad, para ajustar los anchos, simplemente agregue este script jquery:

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

-2

coloca la tabla dentro del div de esta manera para hacer que la tabla se pueda desplazar verticalmente. cambie overflow-ya overflow-xpara hacer que la tabla se pueda desplazar horizontalmente. solo overflowpara hacer que la mesa se pueda desplazar tanto horizontal como verticalmente.

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.