当用户向上或向下滚动时，如何使表格随页面一起移动？答案

【问题标题】：How can I make a table move with the page as the user scrolls up or down?当用户向上或向下滚动时，如何使表格随页面一起移动？
【发布时间】：2016-06-08 14:19:32
【问题描述】：

这是我目前拥有的表格，有没有办法可以让这个表格在用户向上或向下滚动时随页面移动？

<table width="800" border="1" cell="" spacing="2" bgcolor="#336699">
    <tr>
        <th width="0" bgcolor="#CCCCCC">Name</th>
        <th width="0" bgcolor="#CCCCCC">Toll Free Number</th>
        <th width="0" bgcolor="#CCCCCC">Toll Free Number International</th>
        <th width="0" bgcolor="#CCCCCC">Conference ID</th>
        <th width="0" bgcolor="#CCCCCC">Moderator Pin</th>
    </tr>
    <!-- more -->
</table>

【问题讨论】：

您的问题与 Perl 无关，而是与 HTML 和 CSS 有关。我将更改您的标签并相应地编辑问题。
如果您想自己寻找解决方案，不要考虑tables，而是考虑elements。即使您滚动，您也希望页面中的元素粘到屏幕的同一位置。这听起来像使元素具有粘性。 :)
我认为你是对的，这似乎是我正在寻找的更多内容，我只是不知道如何表达我的问题，尽管我会尝试一下，谢谢！
本着这些 cmets 的精神...CSS Position
如果代码看起来很混乱，我无法真正显示更多内容，该页面基本上是一个日历，我希望一个信息表随着用户上下滚动日历而随光标移动。

标签： html css html-table

【解决方案1】：

这个问题可以帮助你弄清楚发生了什么：CSS to keep element at "fixed" position on screen 基本上，正如有人还评论的那样，您想要考虑添加到表格中的元素。这是可行的：

<table width="800" border="1" cell="" spacing="2" bgcolor="#336699">
        <tr>
            <th width="0" bgcolor="#CCCCCC">Name</th>
            <th width="0" bgcolor="#CCCCCC">Toll Free Number</th>
            <th width="0" bgcolor="#CCCCCC">Toll Free Number International</th>
            <th width="0" bgcolor="#CCCCCC">Conference ID</th>
            <th width="0" bgcolor="#CCCCCC">Moderator Pin</th>
        </tr>
        <!-- more -->
    </table>
    <div>
    </div>

CSS：

div{
  height: 4000px;
}

table{
  position:fixed;
}

小提琴：https://jsfiddle.net/xzyvsx00/

【讨论】：

op 想要相反的结果
@LelioFaieta 我现在看到，在我写答案时，cmets 没有更新。虽然公平地说，陪审团仍然不知道 op 想要什么 :)

【解决方案2】：

假设您根本不使用 CSS，您可以设置一个“正常”的 html 页面来获得您想要的行为：

<html>
    <head></head>
    <body>
        <h1>some content</h1>
        <p>some other content</p>
        <div>
            <table width="800" border="1" cell="" spacing="2" bgcolor="#336699">
                <tr>
                    <th width="0" bgcolor="#CCCCCC">Name</th>
                    <th width="0" bgcolor="#CCCCCC">Toll Free Number</th>
                    <th width="0" bgcolor="#CCCCCC">Toll Free Number International</th>
                    <th width="0" bgcolor="#CCCCCC">Conference ID</th>
                    <th width="0" bgcolor="#CCCCCC">Moderator Pin</th>
                </tr>
        <!-- more -->
            </table>
        </div>
    </body>
</html>

这将使表格与页面的其余部分一起滚动。所以如果它没有你在页面的某个地方有一个 css 定义来使它具有粘性

【讨论】：

【解决方案3】：

您可以在 CSS 上将表格设置为 position:fixed。这使得元素相对于视口定位。

如果您没有 CSS 文件，您的代码将是这样的：

<table width="800" border="1" cell="" spacing="2" bgcolor="#336699" style="position:fixed;">
    <tr>
        <th width="0" bgcolor="#CCCCCC">Name</th>
        <th width="0" bgcolor="#CCCCCC">Toll Free Number</th>
        <th width="0" bgcolor="#CCCCCC">Toll Free Number International</th>
        <th width="0" bgcolor="#CCCCCC">Conference ID</th>
        <th width="0" bgcolor="#CCCCCC">Moderator Pin</th>
    </tr>
<!-- more -->
</table>

我建议查看本教程以更好地了解基本定位：http://learnlayout.com

【讨论】：