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

[Freeman Liberty]

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

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

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

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

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

Можно ли перенести полосу прокрутки вверх?
Или возможно есть варианты получше чем полосы прокрутки?

 

[zALEHANz]

Указывайте для div высоту например 600px и полосы прокрутки будет видно и по вертикали и по горизонтали.

 

[Freeman Liberty]

Указывайте для div высоту например 600px и полосы прокрутки будет видно и по вертикали и по горизонтали.

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

 

[CHADREX]

Для тех у кого горизонтальное колесо мыши - не проблема. Вижу несколько выходов.

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

 

[Freeman Liberty]

Я так понимаю без вписывания таблицы в div прокрутку не реализовать?

Третий пункт конечно неплох, но тут уже помучиться придется, одним css не обойтись.

 

[CHADREX]

Как раз одного css и хватит. Я говорил про кнопку которая открывает таблицу на отдельной странице.

 

[dandandan]

Попробуйте показывать таблицу во всплывашке. Например, если мышка остановилась на таблице более Х секунд, во сплывашке показываете полную таблицу.

 

[mervinking]

Поставьте js Table responsive любой... Или пропишите
<div style ="width:100%">
<div style ="overflow: scroll;">
table
</div></div>

 

[dimonwebbb]

Выставить max-width и overflow-x:scroll.

 

[Perat]

Доброго сделайте таблицу горизонтальной