Как я могу заставить "display: block" работать в <td> в IE?

Есть ли что-нибудь, что я могу сделать, чтобы IE отображал ячейки таблицы как фактические блоки?

Учитывая этот стиль:

table,tbody,tr,td,div {
  display: block;
  border: 1px solid #0f0;
  padding: 4px;
}

И этот html:

<table>
  <tbody>
    <tr>
      <td>R1C1</td>
      <td>R1C2</td>
      <td>R1C3</td>
    </tr>
  </tbody>
</table>

<div>
  <div>
    <div>
      <div>R1C1</div>
      <div>R1C2</div>
      <div>R1C3</div>
    </div>
  </div>
</div>

Таблица отображает точно такие же, как вложенные divs в Firefox и Safari/Chrome. Но в Internet Explorer (8) свойство display: block не действует. Таблица отображает точно так, как если бы я не устанавливал это свойство.

Моя основная проблема заключается в том, что ячейки не break; Все они отображаются на одной строке. (Элементы tbody и tr не получают никаких границ и дополнений. Это не проблема для меня прямо сейчас.)

Я не нашел никакой информации о проблеме при поиске. Таблицы совместимости на quirksmode и в других местах сообщают, что IE поддерживает display: block с версии 5.5. Любое обсуждение проблем отображения таблиц, по-видимому, происходит при обратном - предоставление элементов без таблицы любого из свойств display: table-*.

Итак, еще раз, есть ли что-нибудь, что я могу сделать, чтобы IE отображал ячейки таблицы как блок?

(Действительная таблица - это действительно таблица с табличными данными. Я хотел бы сохранить ее таким образом и ненавязчиво переделать ее.)

Ответ 1

Я применил float: left для заполнения. Это работает.

Live Demo

Самая большая проблема width: 100% в сочетании с padding делает вещи слишком широкими.

Итак:
Live Demo (без проблем padding)

Это выглядит немного лучше, но я не уверен, как вы можете легко добавить padding всюду, если вам это нужно.

Это не удастся → с жадностью < - в IE7 (он просто не справится с тем, что это a <table>), и даже если вам неинтересно IE7, он будет нуждаться в настройке для вашего варианта использования (если он вообще применим).

IE7:

Ответ 2

Следующее работало для меня для IE6 +:

tr {
  display: block;
  position: relative
}

td.col1 {
  display: block;
  left: 0;
  top: 0;
  height: 90px;
}

td.col2 {
  display: block;
  position: absolute;
  left: 0;
  top: 30px;
}

td.col3 {
  display: block;
  position: absolute;
  left: 0;
  top: 60px;
}

Предположения:

высота ячейки 30px

Недостатки:

Исправлена высота ячейки
Громоздкая спецификация свойства top (может быть, сгенерирована)
Работает только тогда, когда HTML предоставляет классы для столбцов

Преимущество:

Работает во всех браузерах.

Когда использовать:

Если у вас нет контроля над HTML, но есть контроль над CSS. Некоторые размещенные платежные решения напоминают о том, что отображаются в IFRAME и предлагают пользовательскую таблицу стилей.

Ответ 3

Просто вычислил это с моим коллегой.

ДОПОЛНИТЕЛЬНО РЕКОМЕНДУЕТ НЕ ПОДДЕРЖАТЬ IE8 ВСЕ ЛЮБОЕ! Поскольку вы облегчаете использование неподдерживаемого и в настоящее время небезопасного продукта, который не соответствует современным стандартам и методам. Было бы лучше сказать пользователям обновить и предоставить им некоторые браузерные ссылки для загрузки.

Это сказано. CSS ниже - это минимальное значение css, которое необходимо исправить в Internet Explorer 8.

table {
   width: 100%;
 }
 td {
   float: left;
   width: 100%;
 }

<table>
  <tbody>
    <tr>
      <td>cell-1</td>
      <td>cell-2</td>
    </tr>
  </tbody>
</table>

Ответ 4

добавьте этот код:

<!DOCTYPE html>