如何在单行上显示表格的行 () (Internet Explorer 6,7)？

Question

我想在一行上显示表格的行。这是 Internet Explorer 6 和 7 中的一个问题，因为将 float 属性设置为 left 并将显示设置为 block 是行不通的。将 更改为 也不起作用，因为这些 html 元素是由我不允许更改的框架代码生成的。

编辑：你们中的一些人想要代码，我不知道为什么它会有所帮助，但它就在这里（特定图像和类已被编辑掉，代码在网上不可用，一些类< /em> 可能不是所有地方都是同一个类）

    <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 操作表格元素，并进行所需的转换（trs 到 tds...）。

其明显的缺点是它无法在 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 来完成您所要求的操作。

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，因此如果可能的话，建议为 table 设置一个高度。