Адаптивная таблица на чистом CSS
@media screen and (max-width: 950px) {
table {
border: 0;
width: 100%;
display: table !important;
}
table thead {
display: none;
}
table tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
}
table td {
display: block;
text-align: right !important;
font-size: 13px;
border-bottom: 1px dotted #ccc;
&:last-of-type {
text-align: center !important;
}
}
table td:last-child {
border-bottom: 0;
}
table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}
Весь блок <thead> будет скрыт, вместо него нужно каждой ячейке <td> добавить заголовок через атрибут data-label.
Вы заметили, что таблица выглядит «обрезанной» с правого края? Для придания ему эффекта «растворения» вы можете использовать
Как же я благодарен за этот пост, вы бы знали 😀