Ссылки Поиск Написать В избранное NO

Когда не работает td display: block

Пока жену третий раз возвращают из роддома, я работаю над адаптивным дизайном разных сайтов: /wm/adaptaciya-saytov.php


(10.11.2016 blogger) Адаптивный дизайн - Для designstickers.ru

Сегодня был интересный случай с магазином designstickers.ru.

Когда я приступил к проверке на кроссбраузерность, то быстро заметил, что td {display: block;} просто не работает в половине браузеров. Например, в Edge, IE 11, Сафари и Фаерфоксе. И это было очень странно, так как делать ячейки блоками - один из стандартных (для меня) способов адаптации таблиц под мобильные устройства. И многих старых табличных сайтов - в целом.

А тут - не работало и все. Значение ячейке td присваивалось, но все в целом так и оставалось таблицей.


Решения для проблемы - по возрастанию вероятности

1) Добавить td ячейкам width: 100%; так как иногда в таблицах указывается собственная ширина колонок. И высота, кстати, тоже.

2) Прописать стили для остальных элементов таблицы: table {display: block;} tbody, tr {display: inline;} Не полностью уверен в причинах влияния table и tbody, так как встречалось редко, но вот tr (строки таблицы) довольно часто мешают. Особенно при td {display: inline-block;}


3) td {display: block; float: left; width: 100%;} - оказался рабочим вариантом сегодня. Именно float: left позволил ячейкам таблицы нормально переноситься друг под друга.


4) Экзотический вариант с table {position: relative;} td {position: absolute;} - слишком много мороки.

Если бы то были какие-то мелкие кнопки, можно было еще применить к ним абсолютное позиционирование внутри table или вообще - всей страницы. Но с текстом это не очень удобно.

Единственный подходящий случай - если есть текст и картинка, а нужно вывести картинку и текст, поменяв их порядок местами. Но и там position: absolute применяется только к 1 элементу, а второму блоку просто добавляется отступ.


5) <!DOCTYPE html> - последний шанс. Если глюк все еще не удается победить, стоит попробовать прописать правильный доктайп в самом начале страницы. Должно помочь.