Блог

Я нашел этот плагин при исследовании stackoverflow о том, как создавать адаптивные таблицы:

https://github.com/zurb/responsive-tables

Я использую его, и он довольно хорошо работает для размеров экрана мобильных устройств и планшетов, но не для пользовательских размеров (например, @media (минимальная ширина: 901 пикселей) и (максимальная ширина: 1280 пикселей)). Проблема в том, что в моей таблице много столбцов и она очень широкая, поэтому при определенных размерах экрана, таких как указанные выше, она переполняется, и плагин не позволяет мне устанавливать «overflow: scroll» для размеров выше 767 пикселей (или, скорее, я не могу понять, как).

Что я хочу сделать, так это установить переполнение для размеров экрана выше 767 пикселей и ниже 1280 пикселей. Надеюсь, я хорошо объясняю себя 🙂 Любая помощь будет с БЛАГОДАРНОСТЬЮ принята, поскольку я готов биться головой о стены. Спасибо!

Самый простой способ перезаписать значение переполнения для размера экрана, для которого вы снимаете, — это использовать firebug для поиска селектора, который применяет overflow:hidden. Затем скопируйте этот селектор в свой медиа-запрос и поместите overflow-x:scroll внутри него.

Например, если вы посмотрите на таблицы стилей / grid.css в репозитории github, на который вы ссылались, в строке 107 он определяет

 .block-grid { display: block; overflow: hidden; }
 

Если вы добавите это в файл после него:

 @media (min-width:901px) and (max-width:1280px) {
    .block-grid { overflow: scroll; }
}
 

все элементы с классом block-grid будут при указанном размере экрана использовать полосы прокрутки, если это необходимо. Здесь главное — убедиться, что это загружено после класса css, который вы пытаетесь перезаписать, потому что медиа-запросы ничего не добавляют к специфике селектора. Итак, если одновременно применяются несколько мультимедийных запросов и в них используется один и тот же css-селектор, все сводится к тому, какой из них найден последним.