Cómo crear una tabla HTML5 responsiva

Hace algún tiempo, vi el efecto de tabla responsiva HTML5 escrito por un extranjero en Internet. Su código CSS está escrito en SASS y tiene muchos atributos de datos repetidos. Estamos aquí para mejorar su código y resolver su mala escritura. Para ver la tabla de respuestas en este ejemplo, el navegador debe ampliarse a un tamaño inferior a 600 píxeles. La estructura HTML es la siguiente:

& lttableid = " miyazaki " & gt

& ltcaption & gtPelículas de Miyazaki Hayao& lt/caption & gt;

& ltthead & gt

& lttr & gt& ltth & gtmovies & ltth & gtyear<th & gtglory

& lttbody & gt

& lttr & gt

& lttddata-th="Película " >"Mi vecino Totoro"

& lttddata-th="Año " >1988

& ltTD data-th=" Honor " & gt ; Premio Blue Ribbon (Especial)

& lttr & gt

& lttddata-th="Película " >Princesa Monstruo Gato

& lttddata-th="; Año " >1997

& ltTD data-th=" Honor " & gt; Premio Nebula (Mejor Guión)

& lttr & gt

& lttddata- th="Película " >"El viaje de Chihiro"

& lttddata-th="Año " >2001

& ltTD data-th = " Honor " & gt; Largometraje de animación)

& lttr & gt

& lttddata-th="Película " >El castillo ambulante

& lttddata-th="Año " > 2004

& ltTD data-th = " Honor " & gt;Festival de Cine de Hollywood (Animación OTY)

& lt/table & gt;

Presta atención a los atributos de datos en el código. El atributo de datos de cada celda corresponde al título de la tabla.

Estilo CSS

El estilo CSS básico de la tabla es el siguiente:

Tabla#Miyazaki Subtítulos{

tamaño de fuente: 2 rem; Color: #444;

Margen: 1 rem

Fondo - Imagen: url(miyazaki.png), URL(miyazaki 2.png);

Tamaño de fondo: Incluir;

Repetición de fondo: No repetir;

Posición de fondo: Centro izquierda, centro derecha;

}

Tabla#Miyazaki{

Border-collapse:collapse;

Familia de fuentes: agenda light; font-weight:100;

Fondo: # 333; Color: # fff

Representación de texto: Optimizabilidad;

Radio del borde: 5px

}

Tabla # Palace Hayao Miyazaki el anuncio th {font-weight:600;}

Tabla # Hayao Miyazaki thead th, mesa # Hayao Miyazaki tbody td {

Relleno: 8remfont-size: 1.4 rem ;

}

Tabla #Miyazaki tbody td {

Relleno: 8remfont-size:1.4 rem;

Color :# 444 ; Fondo: # eee

}

Tabla # Hayao Miyazaki tbody tr:not(:last-child) {

border-top: 1px sólido # DDD ;

border-bottom:1px solid # DDD;

}

El siguiente es el código CSS para la tabla responsiva:

@mediascreenand (ancho máximo: 600 píxeles) {

Subtítulos de la tabla#Miyazaki {imagen de fondo: ninguno;}

Subtítulos de la tabla#Miyazaki {display:none }

Tabla#Miyazaki tbody TD {display:block;fill:.

Tabla#Miyazaki tbody tr td:first child{fondo:# 333;color :# fff}

Tabla # Hayao Miyazaki tbody td:before {

Contenido: attr(data-th); peso de fuente: negrita;

Pantalla: ancho de bloque en línea: 6 rem;

}

}

La unidad de encabezado de la tabla está oculta en el código de consulta de medios, cada uno El dato-ésimo de una celda aparece como la etiqueta anterior el contenido de la celda. La primera celda de cada fila tiene un fondo especial y un color de primer plano configurado para que sea más clara.