2

I want to display the rows of a table on a single line. This is a problem in Internet Explorer 6 and 7 because setting the float attribute to left and the display to block won't do. And changing <tr>s to <td>s won't do either as these html elements are generated by a framework's code that i am not allowed to change.

Edit: Some of you wanted the code, i dunno why it would help but here it is (specific images and classes have been edited out, the code is not available online, some-class may not be the same class everywhere)

    <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: blockFireFoxで表示するためにいくつかのテーブル要素に追加しましたが、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をに設定することをお勧めします。height: 0position: absoluteheighttable

于 2010-07-21T14:04:12.070 に答える