Celdas de tabla una debajo de otra

[rodrigus71]

Es cierto que las tablas no se llevan muy bien con el diseño responsive, pero al final he encontrado un apaño que por lo menos a mi me sirve, definiendo antes los <thead> y <tbody>


table {
width: 100%;
border-collapse: collapse;
}

only screen and (max-width: 760px) {

/* Hacer que la tabla ya no se vea como una tabla */
table, thead, tbody, th, td, tr {
display: block;
}

/* Se ocultan los títulos de las columnas ( Descripción, Cantidad, Precio) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}


td {
/* hacer que los campos se comporten como filas */
border: none;
position: relative;
padding-left: 50%;
}

td:before {
/* Se le agregan los títulos */
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}

/* Se ponen los nuevos titulos. */
td:nth-of-type(1):before { content: "Descripcion"; }
td:nth-of-type(2):before { content: "Cantidad"; }
td:nth-of-type(3):before { content: "Precio"; }

}