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

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

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

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

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


css internet-explorer css-tables
person Paul D. Waite    schedule 03.04.2012    source источник
comment
Аналогичный вопрос давно: stackoverflow.com/a/5091822/405015. Это просто не будет работать в IE7, если вы надеетесь, что сможете его поддерживать. box-sizing: border-box будет полезно, если вам придется иметь дело с padding.   -  person thirtydot    schedule 03.04.2012
comment
@thirtydot хех, да, я только что нашел это. Сначала я посмотрел, но искал с помощью IE9, а не только IE. Вы только что получили +1 за ответ на старый вопрос :-)   -  person andyb    schedule 03.04.2012
comment
@andyb: Забавно, что ты нашел больше моих старых релевантных ответов, чем я :)   -  person thirtydot    schedule 03.04.2012

Ответы (2)


arrow_upward
10
arrow_downward

Добавление 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 работать с ‹td› в IE? и частично описано в Как я могу заставить встроенный блок отображать последовательно при применении к ячейкам таблицы? что совершенно справедливо упоминается что любое дополнение приведет к тому, что width:100% создаст горизонтальную полосу прокрутки. Однако этого можно избежать с помощью box-sizing:border-box;, или используя соответственно меньшую ширину или содержащий элемент с фиксированной шириной.

person andyb    schedule 03.04.2012
comment
+1 - я не подумал о ширине. Однако вам не нужен display: block. float позаботится об этом за вас! - person My Head Hurts; 03.04.2012
comment
Кроме того, откуда ваша фотография профиля? Я узнаю ее по игре, в которую играл, когда был маленьким, но не могу вспомнить ее название. Я уверен, что это было нападение чего-то... - person My Head Hurts; 03.04.2012
comment
@MyHeadHurts Ах, но ширина вызовет проблемы с полосой прокрутки, если используется отступ. Кроме того, фото профиля из Дня щупальца :-) - person andyb; 03.04.2012
comment
О радости размещения Internet Explorer! Аааа - да, это было. Спасибо :) Сейчас вспоминаю такие игры, как Monkey Island и Escape from the Planet of the Robot Monsters. Я думаю, что все шансы на продуктивный день улетучились! - person My Head Hurts; 03.04.2012
comment
IE 8 и 9 поддерживают box-sizing, так что это должно решить любые проблемы с заполнением. - person Paul D. Waite; 03.04.2012

arrow_upward
3
arrow_downward

Как насчет:

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

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

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

person My Head Hurts    schedule 03.04.2012