Html 浮动工作台固定/相对位置的问题

我有一个包含3个表的页面，其中一个表是从服务器数据生成的，可以有任意数量的行。其他两个表格用于浮动在顶部，显示随时可见的按钮和表格标题。下面是一些代码：

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

运货马车
量
@foreach（模型中的var项目）{
@Html.Partial（“更多信息”，项目）
}   
回家吧

此设置存在问题： 我在左边有菜单。当我将其折叠时，包含更多信息的表将平滑地跟随，但其他两个表保持固定位置。 如何使“浮在顶部”的表与数据表（包含更多信息的表）一起移动

另外，我曾尝试将两张表放在一个div中，使该div

位置：固定

，使该div中的表

位置：相对

，但它不起作用。

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

回家吧
运货马车
量
@foreach（模型中的var项目）{
@Html.Partial（“更多信息”，项目）
}   

为什么需要3个不同的表？为什么不能将页眉作为、从服务器生成行的循环以及按钮的最后一行放在同一个表中？在这种情况下，您不必分别设置它们的样式。是的，但我的问题不是这一点。我想将页眉表和页脚表固定在顶部和底部，但是相对于左和右。