html - 在表格上放置一个 div

Question

我有一个可以包含 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 像素。

如何解决？谢谢你! :)

Answer 1

...或者直接在你的 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>