24 января 2017 в 3:52
Всем привет. Наверно ни для кого не будет секретом, что я делаю сайт, а именно на CMS Drupal 8. Появилась проблема: делаю таблицу в CKEditor, размер не указывают специально, чтобы занимала всю ширину экрана и не было прокрутки на маленьких экранах. Тестировал на компе с разными разрешениями экрана - все нормально. Но если смотреть с мобильного все равно прокрутка есть, точнее может и не прокрутка даже, а в общем текст выходит за границы таблицы и получается надо прокрутить страницу чтобы прочитать его. Тема Mayo. Что делать подскажите, я уже все перепробовал, и повторяю размера у таблицы нет. т.е. она растягивается по всему экрану нормально, а текст если длинный лезет за пределы экрана как говно:(
Комментарии
Ху_л_иGUN, чувство юмора конечно хорошо, но в данном случае оно не уместно.
p.s. даже ваш матерный ник в цитату не взалит
вытягивайте ячейки в столбик как тут Better Solution http://sitesforprofit.com/responsive-table-plugins-and-patterns
https://css-tricks.com/accessible-simple-responsive-tables/
https://css-tricks.com/responsive-data-tables/
Спасибо, после длительных экспериментов с переносом слов при определенном разрешении и т.д. пришел к выводу, что лучший вариант вот такой:
table {width:100%;}
thead {display: none;}
tr:nth-of-type(2n) {background-color: inherit;}
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;}
tbody td {display: block; text-align:center;}
tbody td:before {
content: attr(data-th);
display: block;
text-align:center;
}
}
Т.е. получаеются ячейки друг под другом. Единственное большое неудобство у меня название ячейки и ее значение находятся в разных строках, вот на скрине у него наименование и вес находятся одной строке, а у меня сплошняком и фиг поймешь где название ячейки а где значение.В общем нарисовал на скрине как у него (слева) и как у меня (справа). Возможно у него нет в таблице линии разделяющие столбцы, но без нее неудобно когда нормальную таблицу с компа смотришь.
Больше на троллинг похоже, чем на шутку.
Вы конечно правы, ваш ответ решил бы мою проблему. Но данный вопрос предполагает более конкретный ответ чем ваш: например ссылку на другой источник где разжевано решение конкретной задачи, или обратить внимание на конкретные элементы того же css и т.д. Возможно в вопросе надо было сделать дополнение, что мне требуется именно ссылка, указание на конкретные элементы css, а что изучать весь css для решения конкретной задачи у меня нет ни малейшего желания, т.к. это нецелесообразно в моем конкретном случае. Но мне кажется, обычному дееспособному человеку это и так должно быть понятно. По крайней мере tlito это понял. Но раз такое дело, в будущем надо наверно вопросы ставить более конкретно.
И на более соответствующих ресурсах.
Если таблица - это вьюха можно этим
https://www.drupal.org/project/footable
если просто таблица в ноде - тогда тоже можно, но у меня не получилось.
Быдло-способ: завернуть таблицу в div классом tabsk
HTML:
<table>...</table>
</div>
CSS:
overflow: auto;
}
Продвинутый быдло-способ: написать скрипт, который оборачивает тегом все таблицы в области контента.
VasyOK, у меня обычная таблица созданния в CKEditor в статье.
Быдло-способ точно подходит.
footable тоже как-то подключают