Как уместить таблицу если ее ширина больше чем ширина страницы?

Freeman Liberty

Постоялец
Регистрация
19 Май 2009
Сообщения
489
Реакции
173
Перенес сайт на wordpress.
Использую популярную тему с адаптивным дизайном.
Во многих статьях содержатся таблицы, которые по ширине не влазят на страницу и перекрывают правый сайдбар.

Как бы решить этот вопрос – чтобы и таблицу было видно и сайдбар не перекрывался?

Первое что приходит в голову это поместить таблицу в div с overflow: auto;

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

В общем неудобно.

Можно ли перенести полосу прокрутки вверх?
Или возможно есть варианты получше чем полосы прокрутки?
6aeae9db264c24f71d44cb4cd2a104b4.jpg
 
Указывайте для div высоту например 600px и полосы прокрутки будет видно и по вертикали и по горизонтали.
 
Указывайте для div высоту например 600px и полосы прокрутки будет видно и по вертикали и по горизонтали.
Вариант, но таблицу станет еще менее удобно просматривать - прийдется не только по ширине, но и по высоте скролить.
А если без дописывания дополнительного div, можно ли приписать "overflow: auto" всем таблицам содержащимся в теле статьи - <div class="td-post-content"> ?
Что-то вроде
.td-post-content table {
overflow: auto;
width: 95%;
}
 
Для тех у кого горизонтальное колесо мыши - не проблема. Вижу несколько выходов.

1. Фиксированная высота блока.
2. Сделать таблицу подвижной для курсора, но тогда выделение текста будет невозможным.
3. Добавить рядом кнопку, открыть таблицу в новом окне или в Google docs.
 
Я так понимаю без вписывания таблицы в div прокрутку не реализовать?

Третий пункт конечно неплох, но тут уже помучиться придется, одним css не обойтись.
 
Последнее редактирование:
Как раз одного css и хватит. Я говорил про кнопку которая открывает таблицу на отдельной странице.
 
Попробуйте показывать таблицу во всплывашке. Например, если мышка остановилась на таблице более Х секунд, во сплывашке показываете полную таблицу.
 
Поставьте js Table responsive любой... Или пропишите
<div style ="width:100%">
<div style ="overflow: scroll;">
table
</div></div>
 
Выставить max-width и overflow-x:scroll.
 
Доброго сделайте таблицу горизонтальной
 
Назад
Сверху