Как отобразить строки (<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

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

Небольшая модификация вашего 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. На этом рисунке используются set и , равные width элементам td, и он действителен только для 3 строк. Числа должны быть изменены в зависимости от количества строк для отображения в строке. По сути, я хочу сказать, что это может не сработать для вашей ситуации, но, по крайней мере, показательно, что при правильных обстоятельствах возможно выполнить то, что вы просили, только с помощью css.

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, если это возможно ,

Answer 3

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