Как я могу получить встроенный блок для отображения последовательно при применении к ячейкам таблицы?

Question

У меня есть простая таблица HTML, которую я хочу отображать последовательно во всех современных браузерах (IE9, последняя версия FF, Chrome, Safari).Если применить ширину и «display: inline-block» только к ячейкам таблицы, FireFox 4 и Chrome позволят ячейкам таблицы «переходить» во вторую строку, как если бы они были просто обычными элементами inline-block.Однако в IE9 ячейки обрабатываются как классические ячейки таблицы, не сохраняют свою ширину и сжимаются в один ряд.

Полный пример кода приведен здесь: http://jsbin.com/ujeber/6

Есть ли свойство CSS, которое можно применить к элементам table, tr или td, чтобы получить IE9, Chrome и FireFox 4 длявести себя так же, как друг с другом?Если нет, то какой из этих браузеров правильно следует стандартам, или стандарты в этом случае неоднозначны?

Разметка:

<table>
  <tr>
    <td>Test1</td>
    <td>Test2</td>
    <td>Test3</td>
    <td>Test4</td>
  </tr>
</table>

Стиль:

  td {
    width:300px;
    display:inline-block;
  }

  table {
    width: 650px;  
  }

Я знаю, что это не типичный / предлагаемый способ использования элемента таблицы.Я спрашиваю в контексте ожидаемого поведения движков рендеринга.Я не ищу ответы, связанные с выбором семантически подходящих тегов.

Answer 1

Я не могу найти способ заставить IE9 дать желаемый результат с помощью display: inline-block.

Если ваш фактический вариант использования не отличается от вашего упрощенного тестового примера, вы должны просто переключиться на float: left на td, который работает:

http://jsbin.com/ujeber/7

float s и inline-block часто взаимозаменяемы. Но они оба имеют разные сильные и слабые стороны. С float s вы должны очистить / содержать их. С inline-block вам приходится иметь дело с дополнительными пробелами (обычно исправляемыми путем удаления пробелов в HTML), и это не работает в IE6 / 7 без дополнительных уловок.

Answer 2

Вы, похоже, упускаете смысл использования элемента <table>, который предназначен для представления данных в табличной форме.Таблицы не переносятся.

Если вы хотите, чтобы ваши ячейки были перенесены, используйте обычный тег уровня блока с inline-block.

---

Если мы говорим о соблюденииПо спецификации IE9 является «наименее верным», учитывая, что презентация должна управляться с помощью CSS.Как бы вы заставили IE сделать это правильно?Установка display: block на элементах tr и table может работать.

Answer 3

Нет, CSS-свойств нет, чтобы обернуть ячейки. _{Ps AFAIK}