Вот таблица клик
Адаптив хорош до ±600 - 700, но потом ад.
Как можно сделать, чтобы она хороша выглядела и была адаптивной?
.table-prices {
width: 100%;
tbody {
tr {
display: table;
width: 100%;
border: 1px solid #ebebeb;
border-top: none;
background: #f8f8f8;
padding: 15px 35px;
border-bottom: 1px dashed #ebebeb;
@include transition(.2s background);
&:first-child {
border-top: 1px dashed #ebebeb;
}
&:last-child {
border-bottom: 1px solid #ebebeb;
}
&:nth-child(even) {
background: $white;
}
&:hover {
background: $green;
td {
color: $white;
}
}
td {
font: 16px $font_regular;
color: $grey;
@include transition(.2s color);
&:first-of-type {
width: 80%;
}
p {
padding: 0;
}
}
&:first-of-type {
border: none;
background: #f8f8f8;
padding: 20px 0;
td {
font: 17px $font_bold;
color: $grey;
text-transform: uppercase;
&:first-of-type {
padding-left: 35px;
}
&:last-of-type {
padding-right: 35px;
}
}
}
}
}
}
< 600 px
? Таблица ужимается до максимума, а как нужно? "хорошо выглядела" — это очень неконкретно.