0

divを含めることができるテーブルがあります。テーブルの行の高さは100ピクセルで、divは最大200ピクセルです。divがテーブルの行よりも高い場合は、テーブルをオーバーレイし、一番下の行もカバーする必要があります。私はこのような絶対的な位置でこれを行うことができました：

<div style="overflow: auto;">
 <table>
  <tr height="100">
    <td>
      <div style="position: absolute; height: 200px">
    </td>
  </tr>
  <tr>
    <td height="100">
      ...
    </td>
  </tr>
  ... (many more rows)
 </table>
</div>

このようにすべてが良いです。問題は、テーブルが非常に長くなり、スクロールが発生し（メインのdivがオーバーフローするため：auto）、スクロールを開始すると、divがその位置に留まり、テーブルのみが移動することです。また、下部のdivは背景を通して表示されます。divの位置を相対位置に変更しようとしましたが、そうすると、divはテーブルをオーバーレイせず、テーブルの行を200ピクセルにプッシュします。

これはどのように解決できますか？ありがとうございました！:)

4

2 に答える 2

2

...または、テーブル要素をHTML構造でうまく機能させるのではなく、div要素を2つ持つことで、メカニズムを直接処理します。テーブルは、表形式のデータを管理するという1つの目的に最適です。データのブランド化には適していません。以下は、保守と更新が簡単になります。

  <table id="table">
      <tr>
        <td>
          <div style="position:relative; height:200px;">
            <div style="position: absolute; top:0; left:0; height: 200px"></div>
          </div>
        </td>
      </tr>
    </table>

次に、すべてのスタイルをスタイルシート内に保持し、クラスを呼び出すだけで、これをさらにアップグレードします...

   <table id="table">
      <tr>
        <td>
          <div class="sub-wrapper">
            <div class="sub-content">
              </div>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="sub-wrapper">
            <div class="sub-content">
              </div>
          </div>
        </td>
      </tr>
     ...etc...
    </table>
于 2013-03-14T15:53:33.423 に答える
1

テーブルセルを作成する必要がありposition:relative、divの上部と左側の位置を追加することもできます

編集

tdsには相対的な位置付けに問題があることがわかったので、相対的なdivを作成してから、絶対的なdivをこの中に入れる方がよいでしょう。

<table>
  <tr height="100">
    <td>
      <div style="position:relative">
        <div style="position: absolute; top:0; left:0; height: 200px"></div>
      </div>
    </td>
  </tr>
</table>

例： http： //jsfiddle.net/EgBAy/

于 2013-03-14T15:44:43.420 に答える