HTML кака организовать перенос ячейки? Хелп плиз!

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

Проблема: При просмотре с компа все хорошо, но когда просматриваешь на телефоне, или делаешь окно браузера уже текст ячеек скукоживается и ломает весь формат страницы с текстом.
Как сделать, чтобы теккстовые ячейки переносились?
С картинками это работает на ура - при сужении страницы - они переносятся , а вот таблица так не переносит.
Как организовать текст, чтобы при просмотре на компе - он был как на примере 1, а при ужимании размера браузера(типа как на мобильном) он переносил блоки текста вниз.
Гуру, помогите пожалуйста. Чегото мне мозгов не хватает.

Вот так на мобильном выглядит.

А вот так надо.

Кому кака, кому не кака

ширина таблицы в пикселях чтоль указана?
переведи в проценты

http://htmlbook.ru/content/osobennosti-tablits

это в css стиле задается, вот примерчик http://www.w3schools.com/css/css_float.asp

То, что HTML кака, это понятно.
Но если сверстать эту табличку на DIV-ах, то всё будет переноситься нормально.

шаблон не адаптивен для мобильных устройств.

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

вот несколько способов

Ширина в процентах 4 ячейки по 25%

Кури что такое бутстрап и не изобретай велосипед

таблица тебе тут не нужна, используй списки
ul li > display: inline-block гугл в помощь

Спасибо парни, дело в том, что к настройкам ЦСС я не имею доступа. Только к тексту/ХТМЛ коду наполнения.
platonmsk есть пример как это сделать?

magic!

<ul style="list-style: none;"> .... </ul>

как вариант сделать свою css'ку и положить рядом. раз нет доступа до основных

Это сообщение отредактировал hatepeople - 31.08.2016 - 11:52

я так понял, что у человека скорее всего имеется доступ только к админке сайта, где в редакторе можно, что-то править, так что с css там не поиграешь.

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

hatepeople
vikrc

Спасибо, парни! Именно списками получается! ЯП сила!

Как-то так.
<div style='float:left;width:100%'>qwertyuiop</div>
<div style='float:left;width:100px'>1</div>
<div style='float:left;width:100px'>2</div>
<div style='float:left;width:100px'>3</div>
<div style='float:left;width:100px'>4</div>
<div style='float:left;width:100%'>asdfghjk</div>

https://jsfiddle.net/0Ldg0uzc/

Это сообщение отредактировал platonmsk - 31.08.2016 - 12:03

vikrc
hatepeople
для слов работает, а красиво переносить предложения не получается

platonmsk
Спасибо, сейчас попробую.

То что надо!
Спасибо огромное!