Не умею править css
Полистайте htmlbook.ru/faq/kak-sozdat-tablitsu-v-html5-i-ukazat-ee-parametry-cherez, там и примеры есть
то таблица немного заходит на боковую панель
Если таблица будет сужаться,как она будет отображаться ещё на более узком экране?
Текст собьётся в кучу, некрасиво.
Я делал по другому
Для экранов меньше 768px только для таблицы применил горизонтальную прокрутку.
Весь контент страницы отображается корректно по ширине экрана, а внизу таблички полоса прокрутки.
Результат — данные в таблице отображается нормальным образом, не вытягиваясь в вертикальную колонку по одному-два слова.
@media (max-width: 767px) {
.table-responsive {
width: 100%;
overflow-y: hidden;
overflow-x: scroll;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
-webkit-overflow-scrolling: touch;
}
}
Посмотреть здесь htei.org/pravila-prijomu_ru
Не могли бы вы мне еще подсказать, куда вставлять данный код?)
В style.css сайта
Только у Вас может быть немного по другому
Дайте ссылку на сайт
http://novaya-gatchina.ru
Кстати, если заходить на сайт с телефона, то как раз реализуется ваш способ — сайдбар уходит вниз и таблицу не трогает.
Остальное завтра
Может пригодится:
На сайте плагина как вставить css
На экранах еще меньше боковая колонка спускается под таблицу, а на ipad они как-бы сливаются. Я пользуюсь http://ipadpeek.com — там удобно смотреть, как сайт будет отображаться на том или ином устройстве. Что касается последней ссылки — я пробовал там играть с размерами строк и столбцов, но если уменьшать размер одного столбца, то остальные адаптируются и увеличиваются, и таблица остается такого же размера.
Не указал сразу, этот стиль:
@media (max-width: 767px) {
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
overflow-x: scroll;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
-webkit-overflow-scrolling: touch;
}
}
применяем к блоку, в который заворачиваем таблицу, т.е. так:
<div class ="table-responsive">
<table id="....>
Ваша таблица
</table>
</div>
Вам можно добавить в style.css такой код
@media screen and (max-width: 900px) {
.site-content {
margin: 0;
}
.site-sidebar {
width: auto;
float: none;
margin: 20px 0 0;
}
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
overflow-x: scroll;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
-webkit-overflow-scrolling: touch;
}
}
Т.е. при размере 900px и менее сайдбар убегает вниз, у таблицы, когда она не помещается, появляется прокрутка.
Можно только для таблицы добавить, нужно экспериментировать и подбирать нужный вариант.
P.S.
Если сложновато, для эксперимента можете в файл header.php перед закрывающим тегом </head> вставить так:
<style>
@media screen and (max-width: 900px) {
.site-content {
margin: 0;
}
.site-sidebar {
width: auto;
float: none;
margin: 20px 0 0;
}
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
overflow-x: scroll;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
-webkit-overflow-scrolling: touch;
}
}
</style>
Посмотреть, как это будет работать.
Можно в принципе так и оставить, но лучше перенести в style.css
Спасибо большое! Вы правы, с непривычки сложновато работать со стилями, я попробовал через header.php и вроде все ок, думаю оставлю так, не хочу рисковать, все таки сайт почти готов. Еще раз благодарю за помощь:)
Если всё работает и устраивает, оставьте пока так.
Успехов!
P.S.
Вы не вставили таблицу в блок <div> так как я предлагал:
<div class ="table-responsive">
<table id="....>
Ваша таблица
</table>
</div>
Соответственно, на узких экранах в таблице нет полосы горизонтальной прокрутки.
Думаю, в Вашем случае можно обойтись без неё, так в ячейках таблицы нет больших фрагментов теста и при сужении выглядит читабельно.
Для корректного отображения хватило простого изменения ширины @media screen and (max-width: 900px), на которой сайдбар уходит вниз.
Тогда этот кусок можно убрать;
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
overflow-x: scroll;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
-webkit-overflow-scrolling: touch;
}
Останется вот это
<style>
@media screen and (max-width: 900px) {
.site-content {
margin: 0;
}
.site-sidebar {
width: auto;
float: none;
margin: 20px 0 0;
}
}
</style>
