Las tablas HTML son un recurso muy habitual en programdores web porque es una herremienta muy potente en muchos casos, pero ahora nos encontramos con el problema de que se adapte a cualquier pantalla o mejor dicho, que sea responsive.

Hay varias maneras de enfrentarse al problema, yo sól he usado una, la que más me gusta:

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {

/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

tr { border: 1px solid #ccc; }

td {
/* Behave like a “row” */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}

td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}

Con este código logfraremos que la tabla se adapte a cualquier pantalla y podamos seguir usándolas.

 

First Name Last Name Job Title
Pedro MR  unawebparati
CSS HTML WordPress