2

Вот таблица клик

Адаптив хорош до ±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;
                    }
                }
            }
        }
    }
}
6
  • 1
    А что вы хотите чтобы происходило при < 600 px? Таблица ужимается до максимума, а как нужно? "хорошо выглядела" — это очень неконкретно. 20 дек 2016 в 15:07
  • Если можно перенесите ваш код сюда со стороннего ресурса. 20 дек 2016 в 15:08
  • @VadimOvchinnikov починил вопрос, там есть ссылка на кодпен -гляньте пожалуйста 21 дек 2016 в 11:29
  • Хорошо, только самого главного нет. Что вы хотите сделать с этой таблицей при ширине экрана менее 600 пикселей? Может пусть добавится скролл и так сойдёт? 21 дек 2016 в 12:03
  • 1
    Хорошо, а что с текстом и ячейками делать? Может часть столбцов убрать для мобильной версии, может сделать текст с многоточиями при переполнениях, может уменьшить шрифт, вообще сделать другую разметку для мобильной версии и т.д. Тут куча вариантов, а какой именно должны решать именно вы. 21 дек 2016 в 12:48

2 ответа 2

1

Если таблица имеет thead с заголовками, то можно сделать таблицу "адаптивной", так как это делает бутстрап - обернуть ее в такой див:

.table-responsive {
    min-height: .01%;
    overflow-x: auto;
}

Если таблица не имеет заголовков, то можно сделать ее адаптивной переведя в блоки:

@media(max-width:600px){
   table,
   tbody,
   tr,
   td{
       display:bolck;
   }
}

Внутренние отступы и бордер тоже можно поменять в зависимости от ситуации - от того какая у вас таблица. Например можно убрать все бордеры у ячеек, сделать выравнивание текста по центру и добавить бордер снизу для каждого ряда, тогда ряды будут разделены визуально по блокам.

0
table {
  width: 100%;
  max-width: 600px;
  margin: auto;
}
3
  • Посмотрите код на кодпен, пожалуйста 21 дек 2016 в 11:28
  • Вообще-то я давно посмотрел.
    – Qwertiy
    21 дек 2016 в 14:49
  • Так у меня тоже самое стоит... 22 дек 2016 в 12:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.