it-swarm.com.ru

Как я могу заставить "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>

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

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

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

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

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

37
Daniel

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

Live Demo

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

Так:
Live Demo (без проблемной padding)

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


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

IE7:

enter image description here

37
thirtydot

У меня работает IE6 +:

 tr {
 дисплей: блок; 
 позиция: относительная 
} 

 td.col1 {
 дисплей: блок; 
 слева: 0; 
 top: 0; 
 высота: 90px; 
} 

 td.col2 {
 дисплей: блок; 
 позиция: абсолютная; 
 слева: 0; 
 top: 30px; 
} 

 td.col3 {
 дисплей: блок; 
 позиция: абсолютная; 
 слева: 0; 
 top: 60px; 
} 

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

  • высота ячейки 30 пикселей

Недостатки:

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

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

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

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

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

Просто понял это с моим коллегой.

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

Что, как говорится. Приведенный ниже 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>

3
Marc van Nieuwenhuijzen

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

<!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», это очень хорошо…. Извините, мой английский очень плохой.

0
Lucio Lu

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

0
Sumit Chauhan