Можете ли вы сделать так, чтобы IE 9 (или более ранние версии) размещал элементы таблицы так, как если бы они были обычными элементами display: block?

Question

В WebKit, Firefox и Opera вы можете установить различные элементы таблицы на display: block, чтобы они не отображались как таблицы:

• http://jsfiddle.net/bHzsC/

Это может быть полезно на небольших экранах (например, iPhone), в которых нет места для традиционного отображения таблиц.

IE 9, однако, по-прежнему размещает ячейки таблицы рядом друг с другом по горизонтали - похоже, он не учитывает display: block в элементах таблицы.

Существует ли какой-либо другой код, который не позволит IE 9 (или более ранней версии) отображать таблицы в виде таблиц?

Answer 1

Добавление float:left;clear:left; заставит IE 9 вести себя немного лучше, но ширина каждого элемента будет неправильной. Если вы добавите width:100% к миксу, он будет вести себя так же, как в Chrome и Firefox.

table,
thead,
tfoot,
tbody,
tr,
th,
td {
    display:block;
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float:left;
    clear:left;
}

Редактировать: Об этом спрашивали раньше Как заставить "display: block" работать на в IE? и частично покрыть Как я могу получить ли встроенный блок для последовательного рендеринга при применении к ячейкам таблицы? , в котором совершенно справедливо сказано, что любое заполнение заставит width:100% создать горизонтальную полосу прокрутки. Однако этого можно избежать с помощью box-sizing:border-box; или с использованием подходящей меньшей ширины или содержащего элемента с фиксированной шириной.

Answer 2

Как насчет:

table,
thead,
tfoot,
tbody,
tr,
th,
td {
    float:left;
    clear: left;
}

Это может иметь последствия для вашего макета, используя floats

Рабочий пример: http://jsfiddle.net/bHzsC/1/