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

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

37 голосов
/ 23 февраля 2011

Что я могу сделать, чтобы 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>

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

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

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

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

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

Ответы [ 5 ]

38 голосов
/ 23 февраля 2011

Я применил float: left к материалу . Это вроде работает.

Live Demo

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

Итак:
Демоверсия (без проблем padding)

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

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

IE7:

enter image description here

4 голосов
/ 14 апреля 2011

У меня работает 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 голосов
/ 24 ноября 2014

Только что понял это с моим коллегой.

ХОТЯ, Я НАСТОЯТЕЛЬНО РЕКОМЕНДУЮ НЕ ПОДДЕРЖИВАТЬ 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>
0 голосов
/ 31 июля 2018

сделать display:table-row; вместо display:block Это будет работать как положено

0 голосов
/ 16 июля 2015

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

<!DOCTYPE html>

дисплей: блок 对 тд 就会 有效。

необходимо добавить этот кодв топе. 

<!DOCTYPE html>
<html>
<head>
    <style>
        td {
            display: block;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>First Name</td>
                <td>Last Name</td>
                <td>Job Title</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><div>James</div></td>
                <td><div>Matman</div></td>
                <td><div>Chief Sandwich Eater</div></td>
            </tr>
            <tr>
                <td><div>The</div></td>
                <td><div>Tick</div></td>
                <td><div>Crimefighter Sorta</div></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Добавьте эту строку кода вверху, но используйте 'float' и 'width' - это очень хорошо.извините, мой английский такой плохой.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...