Question

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

<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个表保持固定在它们的位置上。如何让＆＃34;漂浮在顶部＆＃34;表与数据表一起移动（具有MoreInformation的表？

P.S。我已经尝试将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>

浮动表固定/相对位置的问题

1 个答案: