Таблицы и адаптивность

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

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

Попытки задать горизонтальную прокрутку тегу TABLE к желаемому результату не привели. Свойство "display:block;" убивало 100%-ную ширину таблицы на развернутом экране. Оборачивать каждую таблицу руками в DIVы - тоже не самый лучший вариант. Несколько таблиц на странице + ограниченный в функциях текстовый редактор + контент-менеджер с гуманитарным образованием = ничего хорошего.

<script>
var tables = document.getElementsByTagName('table'); // находим элементы с тегом table
for(var i=0; i<tables.length; i++) { 
    var wrapper = document.createElement('div'); // создаем элемент div
    wrapper.className = 'table_wrapper'; // задаем ему класс table_wrapper
    wrapper.innerHTML = tables[i].outerHTML;
    tables[i].parentNode.replaceChild(wrapper,tables[i])
  }
</script>
<style>
.table_wrapper{
overflow-x:auto; // добавляет горизонтальную прокрутку при необходимости
width:100%;
padding:3px; // про запас, иногда границы таблицы прячутся за рамками внешнего контейнера.
}
</style>


04:22
159
Нет комментариев. Ваш будет первым!