0

我有一张可以包含 div 的表格。表格行高为 100px，div 最高可达 200px。如果 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 溢出：自动）并且我开始滚动 div 停留在它们的位置并且只有表格移动。底部的 div 也通过背景显示。我尝试将 div 的位置更改为相对位置，但这样 div 不再覆盖表格，而是将表格行推到 200 像素。

如何解决？谢谢！:)

4

2 回答 2

2

...或者通过拥有 2 个 div 元素直接在您的 div 元素上处理机制，而不是试图让表格元素与您的 HTML 结构配合得很好。表格有一个很好的用途，即管理表格数据。它们不适合为您的数据打上品牌。以下将更方便您维护和更新！

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