Html 把一个div放在桌子上

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

...
... （更多行）

这样一切都好。 问题是，当表格变得很长时，它会进行滚动（因为主divs溢出：auto），我开始滚动div，它们会保持在原来的位置，只有表格会移动。底部的div也通过背景显示。我尝试将div的位置更改为相对，但这样div就不再覆盖表格，而是将表格行推到200像素

如何解决这个问题？

---

谢谢！：）

您需要使表格单元格

位置：相对

，并且可能需要添加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>

---

示例：

您需要将表格单元格设置为相对位置，并且可能需要添加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>

---

示例：

…或者通过拥有两个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>

等

…或者通过拥有两个div元素直接处理div元素上的机制，而不是试图让table元素更好地处理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>

等

如果可能，请发布一个完整的代码示例（也就是CSS）和一个JSFIDLE。DIV标记关闭在哪里？TD中未关闭的DIV是无效的HTML。如果可能，请发布一个完整的代码示例（也就是CSS）和一个JSFIDLE。DIV标记关闭在哪里？TD中未关闭的DIV是无效的HTML。