2

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

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

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

3 回答 3

2

恐怕我认为这不能以理智和有效的方式完成。float: left在一张桌子上是绝对禁忌的。 编辑：这似乎是有效的（！），并且可以通过取消每个元素的table-*显示属性来实现，但 IE 并不能很好地支持它。

我能想到的唯一可行的解​​决方案是使用 JavaScript/jQuery 操作表格元素，并进行所需的转换（trs 到tds...）。

明显的缺点是它不能在 JavaScript 关闭的情况下工作。

于 2010-07-21T12:19:23.997 回答
1

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

于 2010-07-21T12:19:37.443 回答
1

好吧，有一个 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. 此插图使用与元素相同的集合和宽度，仅对 3 行有效。数字必须根据行数进行更改才能在行中显示。基本上，我的观点是，这可能不适用于您的情况，但至少说明在适当的情况下，可以仅使用 css 执行您所要求的操作。td

的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以 a 结尾，因此如果可能，建议将 a 设置为。height: 0position: absoluteheighttable

于 2010-07-21T14:04:12.070 回答