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

Блоггер / Блог 2016 год

RSS лента новостей, Подписка по Email

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

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

         
         
Главная, 1,
( 44 )