Hacer una tabla responsive
Publicado por Adolfo (18 intervenciones) el 22/11/2022 07:52:23
Buenas de nuevo amigos;
Tenía una tabla para mi web con la información de las cookies pero me di cuenta que no tenía un diseño responsive y cuando la veía desde mi móvil, la tabla hacía que el diseño se saliera del body quedando feo.
Pensé que podría ser una buena oportunidad para probar con una grid, y llegé a la conclusión que la mejor opción, además era trabajar con áreas.
Para ello, tenía este código html:
y ésta era la parte de css:
Podemos ver que son 2 filas y 5 columnas.
Para la parte responsive pretendía que por debajo de los 619px la tabla solo tuviera una columna y cada celda ocupara todo el ancho posible, para ello pensé en esta manera:
Pero obviamente debo estar haciéndolo mal porque no funciona. Imagino que no es posible pasar de 5 columnas a 1 de esta forma, la grid no debe admitir modificar esta estructura de manera responsive pero no he localizado información de nada que diga ésto, he dado por hecho que se podría hacer así.
Qué hago mal?, hay otro modo de hacerlo?. El resultado debería quedar de esa manera organizada para que cada "thead" corresponda con su "tbody" debajo de ella.
gracias anticipadas.
Tenía una tabla para mi web con la información de las cookies pero me di cuenta que no tenía un diseño responsive y cuando la veía desde mi móvil, la tabla hacía que el diseño se saliera del body quedando feo.
Pensé que podría ser una buena oportunidad para probar con una grid, y llegé a la conclusión que la mejor opción, además era trabajar con áreas.
Para ello, tenía este código html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="pic_caption">
<div class="minicms116_table">
<div class="thead"><b>Cookie</b></div>
<div class="thead"><b>Propietario</b></div>
<div class="thead"><b>Duración</b></div>
<div class="thead"><b>Finalidad</b></div>
<div class="thead"><b>Tipo</b></div>
<div class="tbody"><i>Coppermine</i></div>
<div class="tbody"><i>www.miweb.es</i></div>
<div class="tbody"><i>30 Días</i></div>
<div class="tbody"><i>Información para permitir la funcionalidad del sitio web</i></div>
<div class="tbody"><i>Propia</i></div>
</div>
</div>
y ésta era la parte de css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.pic_caption .minicms116_table {
display:grid;column-gap: 2px;
grid-template-columns: 1fr 1fr 1fr 2fr 1fr;
grid-template-areas: "thead thead thead thead thead"
"tbody tbody tbody tbody tbody";justify-items: stretch;
text-align: center;
border: 2px solid var(--color_destacado);
background: var(--color_destacado);
}.pic_caption .minicms116_table .thead {
background-color: var(--color_destacado);
color:#f5f5f5;
display: flex;justify-content: center;
align-items: center;
}.pic_caption .minicms116_table .tbody {
background-color: #f5f5f5;
color: var(--color_destacado);
padding: 5px; display: flex;justify-content: center;
align-items: center;
}Podemos ver que son 2 filas y 5 columnas.
Para la parte responsive pretendía que por debajo de los 619px la tabla solo tuviera una columna y cada celda ocupara todo el ancho posible, para ello pensé en esta manera:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@media (max-width: 619px) {
.pic_caption .minicms116_table {
display:grid;column-gap: 2px;
grid-template-columns: 1fr;
grid-template-areas: "thead"
"tbody" "thead" "tbody" "thead" "tbody" "thead" "tbody" "thead" "tbody"; }}Pero obviamente debo estar haciéndolo mal porque no funciona. Imagino que no es posible pasar de 5 columnas a 1 de esta forma, la grid no debe admitir modificar esta estructura de manera responsive pero no he localizado información de nada que diga ésto, he dado por hecho que se podría hacer así.
Qué hago mal?, hay otro modo de hacerlo?. El resultado debería quedar de esa manera organizada para que cada "thead" corresponda con su "tbody" debajo de ella.
gracias anticipadas.
Valora esta pregunta
0
