Estilo de mesa responsivo
#rt {
width: 100%;
border: 2px solid #ccc;
border-collapse: collapse;
}
#rt th, #rt td {
padding: 3px;
}
#rt th {
text-align: left;
background-color: #eee;
padding: 5px;
outline:1px solid #ccc;
}
#rt td {
padding-left: 5px;
}
@media (max-width: 570px) {
#rt {
width: 100%;
border: 2px solid #ccc;
border-collapse: collapse;
}
#rt th, #rt td {
display: block;
padding: 3px;
}
#rt td::before {
content: attr(data-header);
font-weight: bold;
display: inline-block;
width: 50%;
text-align: right;
padding-right: 20px;
}
#rt th {
text-align: left;
background-color: #eee;
padding: 5px;
outline:1px solid #ccc;
}
#rt th[scope="col"] {
display: none;
}
#rt td {
padding-left: 5px;
}
}
Smooth Jazzin'