Как отобразить строки (<tr>) таблицы в одной строке (Internet Explorer 6,7)?

Question

Я хочу отобразить строки таблицы на одной строке. Это проблема в Internet Explorer 6 и 7, потому что установка атрибута float влево и отображение на блок не будут выполняться. И изменение <tr> s на <td> s тоже не будет выполнено, поскольку эти элементы html генерируются кодом фреймворка, который мне не разрешено изменять.

Edit: Некоторые из вас хотели кода, я не знаю, почему это помогло бы, но здесь (конкретные образы и классы были вырезаны, код не доступен в Интернете, некоторые класса может не быть тот же класс повсюду)

<table class="some-class" width="100%" border="0" 
cellspacing="0" cellpadding="0"> 
    <tr class="some-class"> 
    <td class="some-class"> 
     <a href="#"><img src=pic.jpg"/></a> 
     <div class="some-class"> 
     <div class="some-class"> 
      <a href="#"><img src=pic.jpg"/></a> 
      <p></p> 
      <p></p> 
     </div> <a href="#"><img src=pic.jpg"/></a> 
     </div> 
    </td> 
    </tr> 
    <tr class="some-class"> 
    <td class="some-class"> 
     <a href="#"><img src=pic.jpg"/></a> 
     <div class="some-class"> 
     <div class="some-class"> 
      <a href="#"><img src=pic.jpg"/></a> 
      <p></p> 
      <p></p> 
     </div> <a href="#"><img src=pic.jpg"/></a> 
     </div> 
    </td> 
    </tr> 
    <tr class="some-class"> 
    <td class="some-class"> 
     <a href="#"><img src=pic.jpg"/></a> 
     <div class="some-class"> 
     <div class="some-class"> 
      <a href="#"><img src=pic.jpg"/></a> 
      <p></p> 
      <p></p> 
     </div> <a href="#"><img src=pic.jpg"/></a> 
     </div> 
    </td> 
    </tr> 
</table> 

Answer 1

Я боюсь, что я не думаю, что это можно сделать разумным и действенным образом. float: left в таблице абсолютно табу. Редактировать: Это похоже на действительность (!) И возможно, убрав свойство отображения каждого элемента table-*, но IE не поддерживается.

Единственное работоспособное решение, которое я могу придумать, - это манипулирование элементами таблицы с помощью JavaScript/jQuery и внесение необходимых преобразований (tr s в td s ...).

Очевидным недостатком является то, что он не будет работать с отключенным JavaScript.

Answer 2

Вы задумывались над переформатированием на клиенте, используя Javascript и/или библиотеку Javascript, такую ​​как JQuery? Должно быть возможным управлять DOM, чтобы создать соответствующую структуру отображения, возможно, заменяя элементы таблицы на DIV.

Answer 3

Ну, есть решение css, которое не лишено недостатков, поэтому я не могу сказать, что я всем сердцем рекомендую его (и не был тщательно протестирован кросс-браузер), но для целей «возможности» я предлагаю его:

небольшое изменение вашего HTML для иллюстрации (добавлены некоторые классы в tr теги):

<table class="some-class" border="0" cellspacing="0" cellpadding="0"> 
    <tr class="some-class r1"> 
    <td class="some-class"> 
     <a href="#"><img src="pic.jpg"/></a> 
     <div class="some-class"> 
     <div class="some-class"> 
      <a href="#"><img src="pic.jpg"/></a> 
      <p></p> 
      <p></p> 
     </div> 
     <a href="#"><img src="pic.jpg"/></a> 
     </div> 
    </td> 
    </tr> 
    <tr class="some-class r2"> 
    <td class="some-class"> 
     <a href="#"><img src="pic.jpg"/></a> 
     <div class="some-class"> 
     <div class="some-class"> 
      <a href="#"><img src="pic.jpg"/></a> 
      <p></p> 
      <p></p> 
     </div> 
     <a href="#"><img src="pic.jpg"/></a> 
     </div> 
    </td> 
    </tr> 
    <tr class="some-class r3"> 
    <td class="some-class"> 
     <a href="#"><img src="pic.jpg"/></a> 
     <div class="some-class"> 
     <div class="some-class"> 
      <a href="#"><img src="pic.jpg"/></a> 
      <p></p> 
      <p></p> 
     </div> 
     <a href="#"><img src="pic.jpg"/></a> 
     </div> 
    </td> 
    </tr> 
</table> 

некоторые вещи записки, прежде чем смотреть на CSS:

1. Я добавил display: block в некоторые элементы таблицы для отображения в FireFox, IE6-7 проигнорирует их. Вы можете просто настроить это решение на IE6-7, если решите, что оно соответствует вашим целям.
2. Некоторые из этих моделей были иллюстративными целями.
3. Эта иллюстрация использует набор и равна шириной до td элементов и действительна только для 3 рядов. Числа должны были бы меняться в зависимости от количества строк, отображаемых в строке. В принципе, я хочу сказать, что это может не сработать для вашей ситуации, но, по крайней мере, иллюстративно, что при правильных обстоятельствах возможно делать то, что вы запросили только с помощью css.

СМЧ:

html, body {width: 100%; padding: 0; margin: 0;} 
table {position: relative; table-layout: fixed; width: 33%; display: block;} 
tr {position: absolute; width: 100%;} 
td { border: 1px solid red; width: 100%; display: block;} 
tr.r1 {left: 0;} 
tr.r2 {left: 100%;} 
tr.r3 {left: 200%;} 

Это было бы в идеале иметь строки с заданными высот, как table заканчивается с height: 0, так как данные в пределах это position: absolute, поэтому установив height к table будет рекомендуется по возможности.