Tablas con títulos fijos (Fixed Table)

Hace un tiempo nos encontrabamos desarrollando un sitio corporativo que permitía a los empleados de la empresa, acceder a la información de ventas (ventas mensuales, diarias, anuales, ventas por vendedor, etc). Esta información es visualizada en tablas de html, para su estructura y mejor visualización. Sin embargo, por la gran cantidad de información que contenían estas tablas, cuando se realizaba scroll sobre las paginas, lo normal era que los títulos de la tabla se ocultaran, y aquí comenzaron los problemas. El cliente deseaba que se visualizaran los títulos siempre, no importaba que no existiera espacio en la pagina por la resolución de la pantalla. El tenia un argumento muy sencillo para esta petición:

Los usuarios siempre debe visualizar los títulos, ya que ellos están acostumbrados a siempre tenerlos visibles, ellos utilizan Excel.

Y efectivamente, los usuarios utilizaban Microsoft Excel, sin embargo, después de mucho negociar con el cliente, no se logro evitar esta petición, y se comenzó con el desarrollo de dicha funcionalidad. En internet se encuentran multiples opciones para generar estas tablas con títulos fijos (Table Fixed, como se conocen), sin embargo, para nuestros fines todos tenían un pero:

  • Muy complejos: Algunos tienen tanta funcionalidad que prácticamente replican Excel y su funcionalidad de columnas y renglones fijos y mas.
  • Soporte de navegadores: Algunos son diseñados solamente para un navegador en especifico, pero dejan de lado a los demás; para nuestro caso era indispensable que se pudiera utilizar en al menos Google Chrome, Mozilla Firefox y el amado Internet Explorer (ahora edge).
  • Soporte del desarrollados: La mayoría de estos desarrollos o plugins se crearon alguna vez y luego de publicarse en internet acabo el seguimiento y desarrollo por parte del autor.

Después de la infructuosa búsqueda la solución era obvia, teníamos que desarrollar nosotros nuestra propia solución. Así nació FixedTable.js, un pequeño script en Javascript que permite de una forma sencilla crear esta funcionalidad, pero veamos como funciona. En tu pagina es necesario contar con los siguientes elementos:

  1. La tabla con la información: Bueno creo que es obvio, esta tabla deberá contener el elemento thead con los renglones y columnas a mantener siempre visibles.
  2. Declaración del script: Esto se realiza mediante la inserción de la siguiente linea de html:
<script src="/posts/FixedTable.js" type="text/javascript"></script>

Una vez que se cuenta con estos elementos insertados se puede invocar la funcionalidad de dos formas distintas.

  • La tabla se encuentra en un contenedor: Util cuando se desea manejar el ancho y alto máximos mediante css, en este caso la tabla deberá estar dentro de un elemento div.
Header 1 Header 2 Header 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3

Para lograr la tabla de arriba se requiere del siguiente código css:

th,
td {
     border: 1px solid #000000;
}
        
thead {
     background-color: #ccc;
}
        
.tableContainer {
     display: block;
     max-height: 500px;
     overflow-y: scroll;
}        

Y el siguiente código de javascript:


fixedTable({
  table: document.getElementById('fixedTable'),
  container: document.getElementById('tableContainer')
});
  • La tabla no cuenta con un contenedor: En este caso es necesario especificar el ancho y altos máximos para la tabla, y el script se encargara del resto.
Header 1 Header 2 Header 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2El soporte para este pequeño script por part More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3

Para lograr la tabla anterior solo es necesario el siguiente codigo de javascript:

fixedTable({
    table: document.getElementById('fixedTableWithOutContainer'), 
    maxWidth: '100%', 
    maxHeight: '200px'
});

Este script esta soportado en:

  • Internet Explorer 9 o superior
  • Microsoft Edge
  • Google Chrome 49 o superior
  • Mozilla Firefox 45 o superior
  • Opera 36 o superior

Como pueden ver es un pequeño script que cubre una funcionalidad muy requerida por los clientes, el cual tenemos pensado seguir ampliando en cuanto a funcionalidad y mejoras en el código. El script lo pueden obtener desde este link o desde github.

Actualización Se agrego soporte a tablas con celdas combinadas mediante los atributos rowspan y colspan, como el ejemplo siguiente:

Cell 1-a Cell 1,2-b Cell 2 Cell 3 Cell 4 Cell 5
Cell 1-a Cell 2 Cell 3 Cell 4
Cell 1 Cell 2 Cell 3 Cell 4
Cell 1-a Cell 1-b Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1-a Cell 1,2-b Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Para lograr la tabla anterior solo es necesario el siguiente codigo de javascript, donde se establece un nuevo parametro de configuracion denominado "modelRowIndex", el cual indica el renglón del tbody de la tabla que cuenta con la misma estructura que el primer renglón del thead.
fixedTable({
    table: document.getElementById('combinedCells'), 
    maxWidth: '100%', 
    maxHeight: '400px',
    modelRowIndex: 3
});

Jean Carlo

Entusiasta de la programación, freelance intermitente, lector asiduo, cinéfilo, y editor esporadico en este sitio.

0 comentarios

Agregar un comentario