Css 如何在单行上显示表格的行（<；tr>；）（Internet Explorer 6,7）？

我想在单行上显示表的行。这在InternetExplorer6和7中是一个问题，因为将float属性设置为left，而将display设置为block是不行的。将

s更改为

s也不行，因为这些html元素是由框架的代码生成的，我是不允许更改的

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

恐怕我不认为这是一种理智有效的方式<代码>浮动：表格中的左绝对是禁忌Edit:这似乎是有效的（！）并且可以通过删除每个元素的

表-*

显示属性来实现，但IE不太支持

我能想到的唯一可行的解决方案是使用JavaScript/jQuery操作表元素，并进行必要的转换（

tr

s到

td

s…）

---

这样做的明显缺点是，如果关闭JavaScript，它将无法工作。

您是否考虑过使用JavaScript和/或类似JQuery的JavaScript库在客户端上重新格式化？应该可以操纵DOM来创建适当的显示结构，例如，可能用div替换表元素。

好吧，有一个css解决方案并非没有缺点，因此我不能说我全心全意地推荐它（并且还没有在跨浏览器中进行过彻底测试），但出于以下目的：“可能性”我提出：

对html稍作修改以供说明（在

tr

标记中添加了一些类）：

---

理想情况下，这将具有设置高度的行，因为

表

以

高度：0

结束，因为其中的数据是

位置：绝对

，因此如果可能，建议将

高度

设置到

表

。

我们不是通灵者，因此请不要太模糊，并链接到实际代码您发布生成的html的一部分？如果它是由一个不允许更改的框架生成的，那么您将无法执行此操作。放弃该框架。为什么这是一个禁忌？如果您给其他表元素一个合适的（非

表*

）

display

value，那么符合标准的浏览器应该没有问题。例如：

table，tbody{display:block}tr{float:left}td{display:inline}

我不是在寻找一个必须针对w3c验证程序进行验证的解决方案，而是一个在所有浏览器中都很好的解决方案，最好没有验证程序javascript@altvali当前位置我刚刚对Pekka的回答进行了评论。你所做的一切都很好（只是不支持）。如果你想显示“表行”“在IE中，您将无法使用桌子。IE只能将表格显示为表格，而不能显示其他内容。@altvali@RoToRa你说得有道理。关于

table

元素有一些特定的规则，但是如果去掉

display:table-x

属性，这些规则都会消失。这实际上可能是有效的（在IE以外的浏览器中），我的观点是正确的。我想找到一个css解决方案，但如果没有，我会尝试javascript。如果您有任何特定的解决方案，请发布它们，因为我不确定在javascript/jQuery解决方案中应该使用什么方法（为它们提供绝对位置和特定位置？或者转换整个表，使tr在单个tr中成为tds？）如果看不到开始状态和目标状态，除了提示之外，几乎不可能给你任何东西。我希望删除一些标签并替换其他标签，以实现您的目标布局。我当然不会开始考虑绝对定位。

    <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>

<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>

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%;}