Как я могу сделать таблицу в блоке кода на моем сайте Squarespace адаптивной?

У меня есть веб-сайт, созданный на основе Squarespace. Используя «кодовый блок» Squarespace, я вставил HTML для таблицы на эту /тестовую страницу. Таблица не отвечает.

Я хотел бы, чтобы таблица отображалась на мобильных устройствах, как если бы она была в <iframe> с горизонтальной прокруткой. При уменьшении размера экрана на любом устройстве мне нужно, чтобы столбцы не сужались за определенную точку, скажем, min-width: 150px.

Я искал этот сайт и прочитал почти 7000 результатов по терминам «отзывчивая таблица», но не нашел ничего, что казалось бы точным. Я искал трюки с CSS, но ничего не нашел, что неудивительно, поскольку я думаю, что это невозможно сделать только с помощью CSS. Конечно, я искал форум Squarespace Answers, но не нашел помощи.

Я создал эту ручку CodePen, который ведет себя так, как я хочу. Тот же самый HTML в блоке кода Squarespace не работает.

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

Спасибо за интерес к моему вопросу. Любая помощь, конечно, будет высоко оценена.


javascript responsive-design responsive html-table
person alxfyv    schedule 25.04.2016    source источник
comment
оберните таблицу в <div> с фиксированной шириной и стилем overflow-x: auto   -  person Stephen Thomas    schedule 26.04.2016
comment
Большое спасибо. По сути, я нашел этот ответ в Генераторе таблиц, когда сказал ему сделать таблицу отзывчивой. Я должен был подумать об этом, прежде чем задавать вопрос.   -  person alxfyv    schedule 26.04.2016

Ответы (1)


arrow_upward
0
arrow_downward

После публикации вопроса я перешел к Генератору таблиц, вкладке HTML-таблицы, и обнаружил, что там есть опция, под селектором раскрывающегося списка «Дополнительные параметры», чтобы сделать таблицу отзывчивой. Эта опция сгенерировала запрос @media, который сделал свое дело.

Общая разметка, которую я использовал:

<div class="schedule-wrapper">
  <table class="schedule">
  ...
  </table>
</div>

CSS, который я использовал:

@media only screen
  and (max-width: 1200px) {
    .schedule-wrapper {
      -webkit-overflow-scrolling: touch;
      overflow-x: auto;
      margin: auto 0;
    }
    .schedule {
      width: auto;
    }
}

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

Кажется, это выполнимо только с помощью CSS. Как круто.

person alxfyv    schedule 26.04.2016