Изменение CSS, если ширина таблицы превышает страницу

Question

С отзывчивым CSS можно выполнить определенный CSS на основе размера экрана. Например:

@media all and max-width: 1024px {...} 

установить CSS только для экранов с шириной меньше чем 1024. Теперь моя цель состоит в том, чтобы выполнить CSS, когда ширина элемента (в моем случае, таблица) превышает ширину страницы.

Так просто сказал, что я хочу, чтобы CSS выполнялся, когда моя таблица не помещалась на моей странице.

Если это невозможно, также можно сравнить ширину таблицы с фиксированным значением. Итак, css, который будет добавлен, когда определенный элемент имеет ширину больше ... px.

Причина, по которой я хочу сделать это, заключается в том, что я не хочу, чтобы таблица превышала ширину страницы. В таблице может быть разное количество столбцов на основе вывода скрипта PHP.

Я знаю, что это можно сделать с помощью Javascript, но я ищу решение для CSS.

Answer 1

Существует не простой способ сделать то, что вы хотите с чистым CSS, но есть хороший изношенном творческих подходов к этой проблеме в http://css-tricks.com/responsive-data-table-roundup/

** Edit: Чтобы быть более конкретным, возможно, проще всего применить к вашей ситуации, будет метод чувствительных таблиц ZURB, который требует простой привязки файлов reponsive-tables.js и responsive-tables.css к вашему HTML-документу, а затем добавление соответствующего имени класса в ваш элемент table. Вы можете узнать больше об этом и скачать файлы по адресу http://zurb.com/playground/responsive-tables.