Когда не работает td display: block
Пока жену третий раз возвращают из роддома, я работаю над адаптивным дизайном разных сайтов: /wm/
Сегодня был интересный случай с магазином 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> - последний шанс. Если глюк все еще не удается победить, стоит попробовать прописать правильный доктайп в самом начале страницы. Должно помочь.
