soy Kseso y esto EsCSS

From table to tabs pure Css

Convertir una tabla (table) en un sistema de navegación por pestañas (tabs o slides) sólo con Css sin tocar el marcado html.

From table to tabs pure Css

·Por Kseso ✎ 2
De datos tabulados (table) a navegación por pestañas (tabs)

En muchas ocasiones se construyen tablas Html (table) con otros elementos en base a cambiar el valor de la propiedad display: table y sus asociados. Mala práctica, pero bueno.

Otras veces lo que se busca es aprovechar alguna de las particularidades de las tablas trasladándolas a elementos de bloque.

Pero lo que nunca he visto ha sido transformar las tablas, vía Css, en otro tipo de elementos. Así que me pregunté si sería posible a partir de una tabla, supongamos que ya existente, transformarla en digamos un sistema de tabs o navegación por pestañas sin tener que tocar su marcado Html.

Claro está que para poder hacerlo hemos de contar en el marcado inicial con los elementos que permitan el funcionamiento del sistema. En esta demo, al igual que en otras muchas, una serie de input cada uno con su label

Sin demo es un dragón

Como posíblemente lo que más te interesa por encima de código y explicaciones, sea verlo en funcionamiento, aquí tienes la tabla funcionando como un sistema de tabs, pestañas o slide:

See the Pen From Table to Tabs by Kseso (@Kseso) on CodePen.

Ver Demo a Full

El marcado html

Antes de nada un aviso: como en toda demo parto de una tabla y su marcado Html acorde con el objetivo buscado. Así sólo está formada por un caption y en su tbody lo que encontrarás es una serie de filas cada una de las cuales sólo tiene un th y un td

<table> <caption>From Table to Tabs</caption> <tbody> <tr> <th><label for='uno' data-page='slide 1'>Opción 1</label></th> <td> <<!-- contenido --> </td> </tr>

La razón de utilizar los th para contener cada label en vez de otro td es que me permite apuntar a ellos en el css con un selector más sencillo.

El Css relevante

Quizás supongas, como yo inicalmente, que es obligado cambiar el valor de la propiedad display de cada elemento de la tabla. Pues descubrí que inicialmente no lo necesitaba [ver Compatibilidad entre navegadores].

Sólo es necesario posicionar de forma absolute los td y para que ocupen la superficie deseada sin mayores complicaciones hacer que su referente no sea su tr padre sino el tbody

Para ello basta con añadir al selector .tr la declaración position: static y dimensionar los td convenientemente:

tr {position: static;} th { width: 25%; background: #0A2C4F; border-bottom: 1px dashed rgba(236,72,127,1); } td { background: no-repeat center center; background-size: cover; position: absolute; top: 0; left: 25%; right: 0; bottom: 0; padding: 1rem; overflow: auto; z-index: 2; }

El resto es construir los oportunos selectores Css para realizar el cambio entre tabs al :checked de cada imput, estilizar un poco más cada elemento (fondos, tamaño de letra, colores...) y aplicar un par de animaciones Css para ver y ocultar cada td

Compatibilidad entre navegadores

La demo, en codepen, sólo la he visto en Chrome y Firefox (SO Vista). He encontrado una pequeña discrepancia.

Firefox tiene presente el figcaption y la colocación de cada td la realiza con referencia al tbody. Así la propiedad top para necesita un valor de 0 para situar cada td justo en su sitio.

Sin embargo en Chrome parece que el tbody englobase también al caption y necesita compensarlo en la propiedad top con un valor igual a la altura del caption.

Para lograr un comportamiento igual entre ambos me fue necesario cambiar el valor de display que por naturaleza tienen el tbody y sus hijos ( tr y th ) a block y asignarles anchuras.

Ampliado

Una variación de esta idea de pasar de una tabla Html a un sistema de navegación por pestañas (tabs) es tener presente las @media queries de Css.

Con su uso se puede mostrar la tabla como tal a partir de cierto tamaño de ventana y forzar la aparición de las pestañas cuando dicho tamaño sea menor de cierto valor.

Como en este otro pen. Pero ten cuidado, lo he realizado a la carrera y no he verificado su correcto funcionamiento ni tampoco he limpiado ni optimizado el código. Sólo lo incluyo para ilustrar las posibilidades de la idea.

See the Pen De table a Tabs v2 by Kseso (@Kseso) on CodePen.

Para observar el paso de tabla Html a slide mejor ver el pen diréctamente, sin estar aquí incrustado:

Ver Demo

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