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>

这样一切都很好。问题是，当表变得很长并且它进行滚动时（因为主divs溢出：auto）并且我开始滚动divs保持在他们的位置并且只有表移动。底部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>

Answer 2

你需要制作表格单元格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/

在桌子上放置一个div

2 个答案: