Как сделать таблицу с двумя фиксированными столбцами адаптивными?

Question

Как сделать таблицу с двумя фиксированными столбцами адаптивными?

0

У меня есть таблица с двумя фиксированными столбцами, одна слева и одна справа.

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

Это основной класс, который контролирует поля (чтобы обеспечить место для фиксированных столбцов) вместе с шириной:

#myTable > .wrapper {
    overflow-x: scroll;
    overflow-y: visible;
    width: 83%;
    margin-left: 126px;
    margin-right: 45px;
}

Я попытался войти в инструменты разработчика и изменить значение ширины вниз при изменении размера браузера. Пока это единственное решение, которое я нашел. Хотя это потребовало бы тонны медиа-запросов, которые не являются предпочтительным решением.

Как я могу изменить свои классы css чтобы сделать это отзывчивым?

Вот демонстрация

Fizzix 28 апр. 2014, в 04:28

Источник

0

Вы хотите, чтобы размер таблицы уменьшался / увеличивался и перемещался при изменении размеров окна или только одного или другого?
franklinexpress 28 апр. 2014, в 01:54
0

изменить этот класс CSS из position:absolute; в position:fixed ?
Brendan 28 апр. 2014, в 02:06
0

В этом примере измените размер окна, в котором находится результат. Вы заметите, что крайний правый столбец (имеющий абсолютную позицию) в конечном итоге объединится с остальной частью таблицы и будет выглядеть очень неуместно. Изменение его в fixed положение не поможет.
Fizzix 28 апр. 2014, в 02:13

Показать ещё 1 комментарий

Теги:

html

css

css3

1 ответ

Ещё вопросы

Вы хотите, чтобы размер таблицы уменьшался / увеличивался и перемещался при изменении размеров окна или только одного или другого?
изменить этот класс CSS из position:absolute; в position:fixed ?
В этом примере измените размер окна, в котором находится результат. Вы заметите, что крайний правый столбец (имеющий абсолютную позицию) в конечном итоге объединится с остальной частью таблицы и будет выглядеть очень неуместно. Изменение его в fixed положение не поможет.

reuelab · Accepted Answer · 2014-04-28T00-45-00.000Z

Попробуйте ограничить ширину обертки, используя min-width и max-width:

#myTable > .wrapper {
    overflow-x: scroll;
    overflow-y: visible;
    max-width: 83%;
    min-width: 40%;
    margin-left: 126px;
    margin-right: 45px;
}

FIDDLE DEMO

Отлично, работает довольно хорошо. Просто нужно немного поэкспериментировать с ним, чтобы понять, но спасибо за решение :)