html - float 表固定/相对位置的问题

Question

我有一个页面，里面有 3 个表，其中一个是从服务器数据生成的，可以有任意数量的行。其他 2 个表格用于 float 在顶部并显示始终可见的按钮和表格标题。这是一些代码:

<table style=" position:absolute, top: 110px; z-indez:1; width:100%;">
  <tr>
    <td>
      <table>
        <tr>
          <td> Cart </td>
          <td> Quantity </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<table style="margin-top:60px; height:auto; width:100%;">
@foreach (var item in Model) {
<tr>
    <td>
        @Html.Partial("MoreInformation", item)
     </td>
</tr>
}   
</table>

<table style="position:absolute; bottom:100px; height:70px; width:100%;">
    <tr>
        <td>
            <table>
                <tr>
                    <td style="text-align:left;">
                        <button type="button" onclick="window.location.href='/Home/Index'">Go Home</button>
                    </td>
                    </tr>
            </table>
        </td>
    </tr>
</table>

这个设置有问题: 我在左侧有一个菜单。当我折叠它时，带有 MoreInformation 的表很顺利，但其他 2 个表保持固定在它们的位置上。 如何使“ float 在顶部”的表格与数据表格一起移动(带有更多信息的表格？

附言我曾尝试将 2 个表放在一个 div 中，使该 div position:fixed 并将表放在 position:relative 中，但它不起作用。

Answer 1

<table style=" position:absolute, top: 110px; z-indez:1; width:100%;">
<tr>
        <td>
            <table align="left">
                <tr>
                    <td style="text-align:left;">
                        <button type="button" onclick="window.location.href='/Home/Index'">Go Home</button>
                    </td>
                    </tr>
            </table>
        </td>
    </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td> Cart </td>
          <td> Quantity </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<table style="margin-top:60px; height:auto; width:100%;">
@foreach (var item in Model) {
<tr>
    <td>
        @Html.Partial("MoreInformation", item)
     </td>
</tr>
}   
</table>