soy Kseso y esto EsCSS

Sticky Header en tablas puro Css con position: sticky

Sticky Header en tablas puro Css con position: sticky

·Por Kseso ✎ 2

Ejemplo de funcionamiento de la nueva propuesta de Position: sticky aplicado a una tabla, en la que interesa que el encabezado thead se mantenga visible mientras se hace scroll en ella.

En la actualidad, para lograr este efecto, es necesario recurrir a algún tipo de programación como javascript. De hecho, hay múltiples extensiones para muchas librerías como jQuery, Prototype, MooTools, Dojo... Suelen conocerse como "Sticky Header" o "Encabezados Persistentes".

Actualización

Este post fue publicado originalmente en Septiembre de 2012. Corregido y actualizado en Enero de 2017.

.- La propiedad Position: sticky sólo es soportada por Chrome Canary en este momento año 2017 es soportada por Firefox, Chrome, Safari y Opera.
.- Pese a ello, su uso no supone ningún problema, por la degradación elegante que realiza.
.- Mas info sobre Position: sticky en este artículo.

Encabezado de tabla fijo con puro Css

Para lograr el stiky header en la tabla con solo y puro Css sólo es necesario declarar en nuestro css:

table thead { position: -moz-sticky; position: -ms-sticky; /* eterno "under consideration" */ position: -o-sticky; position: -webkit-sticky; /* para Safari /* position: sticky; top: 0; /* obligado */ z-index: 5; /* asegura que nada lo tape */ }

Recuerda que para que funcione la declaración position: sticky es obligado declarar la propiedad de colocación, en este caso top:0 y el valor de ésta es el punto en el que se quedará anclado el elemento al alcanzarlo.

Ejemplo de tabla con Sticky Header puro Css

Pattern Meaning section level
* any element Universal selector 2
E an element of type E Type selector 1
E[foo] an E element with a "foo" attribute Attribute selectors 2
E[foo="bar"] an E element whose "foo" attribute value is exactly equal to "bar" Attribute selectors 2
E[foo~="bar"] an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar" Attribute selectors 2
E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar" Attribute selectors 3
E[foo$="bar"] an E element whose "foo" attribute value ends exactly with the string "bar" Attribute selectors 3
E[foo*="bar"] an E element whose "foo" attribute value contains the substring "bar" Attribute selectors 3
E[foo|="en"] an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en" Attribute selectors 2
E:root an E element, root of the document Structural pseudo-classes 3
E:nth-child(n) an E element, the n-th child of its parent Structural pseudo-classes 3
E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one Structural pseudo-classes 3
E:nth-of-type(n) an E element, the n-th sibling of its type Structural pseudo-classes 3
E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one Structural pseudo-classes 3
E:first-child an E element, first child of its parent Structural pseudo-classes 2
E:last-child an E element, last child of its parent Structural pseudo-classes 3
E:first-of-type an E element, first sibling of its type Structural pseudo-classes 3
E:last-of-type an E element, last sibling of its type Structural pseudo-classes 3
E:only-child an E element, only child of its parent Structural pseudo-classes 3
E:only-of-type an E element, only sibling of its type Structural pseudo-classes 3
E:empty an E element that has no children (including text nodes) Structural pseudo-classes 3
E:link
E:visited 		an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited) The link pseudo-classes 1
E:active
E:hover
E:focus 		an E element during certain user actions The user action pseudo-classes 1 and 2
E:target an E element being the target of the referring URI The target pseudo-class 3
E:lang(fr) an element of type E in language "fr" (the document language specifies how language is determined) The :lang() pseudo-class 2
E:enabled
E:disabled 		a user interface element E which is enabled or disabled The UI element states pseudo-classes 3
E:checked a user interface element E which is checked (for instance a radio-button or checkbox) The UI element states pseudo-classes 3
E::first-line the first formatted line of an E element The ::first-line pseudo-element 1
E::first-letter the first formatted letter of an E element The ::first-letter pseudo-element 1
E::before generated content before an E element The ::before pseudo-element 2
E::after generated content after an E element The ::after pseudo-element 2
E.warning an E element whose class is "warning" (the document language specifies how class is determined). Class selectors 1
E#myid an E element with ID equal to "myid". ID selectors 1
E:not(s) an E element that does not match simple selector s Negation pseudo-class 3
E F an F element descendant of an E element Descendant combinator 1
E > F an F element child of an E element Child combinator 2
E + F an F element immediately preceded by an E element Adjacent sibling combinator 2
E ~ F an F element preceded by an E element General sibling combinator 3

Funcionamiento del Sticky Header

Si usas Chrome Canary verás que el encabezado de la tabla se desplaza hacia arriba cuando haces scroll. Al alcanzar la parte superior de la ventana se mantiene fija (fixed) y los datos de la tabla pasan por debajo del encabezado. Al alcanzarse la parte inferior de la tabla y seguir haciendo scroll el encabezado pierde la posición y desaparece.

En el resto de navegadores no se produce este efecto, pero tampoco ningún otro efecto no deseado.
En este vídeo puedes ver en funcionamiento position: sticky en puro css:

Tabla con sticky header puro css en codepen

Y como final, el ejemplo en codepen para que lo veas libre de las injerencias de los estilos del blog sobre la tabla:

See the Pen Table with Sticky Header in pure Css by Kseso (@Kseso) on CodePen.

Créditos

La tabla del ejemplo, con sus datos y marcado html provienen de la página del W3c

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso