Question

是否可以/轻松创建一个网页，其行为类似于应用了“冻结窗格”的Microsoft Excel电子表格？这样，我的意思是标题和侧边栏应保持固定在其位置，但在页面滚动时向下/向右滚动。

我需要像this之类的东西，除了我希望它应用于整个页面而不是表格。

Answer 1

切换到position: fixed时可以这样做。

例如，具有类

的div

#fixed-div {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background-color: #000;
}

滚动时，

将在浏览器视口的最高100px中保持固定。

这个小提琴演示了垂直和水平方向的效果。 http://jsfiddle.net/ukzYf/1/

希望这有帮助。

Answer 2

您在寻找position: fixed吗？

以下是一个简单的工作示例：

＆＃13;

.header {
    position: fixed;
    top: 0;
    left: 0;
    height: 50px;
    background: red;
    width: 100%;
}
.sidebar {
    position: fixed;
    top: 50px;
    left: 0;
    width: 100px;
    background: blue;
    height: 100%;
}
.content {
    margin: 50px 0 0 100px;
    padding: 10px;
    width: 2000px;
}

＆＃13;

<div class="header"></div>
<div class="sidebar"></div>
<div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.<br>
    Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.
    Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque. Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna.<br>    
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis. Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hendrerit ut. Sed non tortor sodales quam auctor elementum. Donec hendrerit nunc eget elit pharetra pulvinar. Suspendisse id tempus tortor. Aenean luctus, elit commodo laoreet commodo, justo nisi consequat massa, sed vulputate quam urna quis eros. Donec vel.<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.<br>
    Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.<br>
    Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque. Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna.<br>
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis. Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hendrerit ut. Sed non tortor sodales quam auctor elementum. Donec hendrerit nunc eget elit pharetra pulvinar. Suspendisse id tempus tortor. Aenean luctus, elit commodo laoreet commodo, justo nisi consequat massa, sed vulputate quam urna quis eros. Donec vel.
</div>

＆＃13;

Answer 3

我认为你看起来像这样。

可能这可以帮助：angular-table-freezepane https://jatinmarwah.github.io/angular-table-freezepane/app/#/

Answer 4

我相信您正在寻找this fixed layout example中演示的内容。

如果有，请参阅the code and tutorial here：

我们可以使用css position属性修复html元素。另外，为了使元素固定，我们需要从顶部，左侧，底部，右侧给出至少一个坐标点。制作固定位置元素的语法如下所示。在下面提供的这些示例中，我使用了位置固定div来在窗口滚动中显示静态位置的元素。

.fixed_elements{
    position:fixed;
    top:100px;
}

Answer 5

我用这个：

tbody{
  overflow-y: auto;
  height: 350px;
  width: 102%;
}
thead,tbody{
    display: block;
}

我使用bootstrap css col-md-xx定义列宽。在没有定义列宽度的情况下，自动宽度与自动宽度不匹配。 102％的百分比是因为你失去了溢出的一些sapce

Answer 6

众所周知的css规则

position: fixed;

应用于表头的

通常会将它们与相应列之间的匹配制动到表的tbody部分，因为它会将目标html元素与DOM普通流“分离”，并使其作为独立元素。这意味着如果编辑任何td元素中的任何表体文本并且相应列的宽度相应于新文本长度而变化，则thead不会保持同步宽度，从而生成错误的列对齐。要解决此问题，您必须为每列添加固定宽度，以防止由于列未对齐而导致布局中断。

所以我想添加一个没有这种缺点的CSS解决方案：

.stickyClass > th
{
  position: sticky;
  top: 0;
}

插入以下代码

class = "stickyClass"

到HTML tr元素中你要定位什么。

它是如何工作的？它将使所有嵌套的元素（标题单元格）像往常一样运行，直到实现指向第二个css规则的滚动顶部（可以设置不同于0的值以满足您的需要）。在该滚动量之后，该元素有可能成为其行为并充当固定元素。粘滞规则的优点是它保持thead-tbody列的宽度对应，因此即使编辑了td内容文本并且更改了列本身的宽度，表格布局也不会中断。因此，它是弹性表格布局中的一个很好的替代方案。

此外，如果您有一个包含表格甚至其他内容的长文档，则使用固定的css解决方案可使表头保持可见，即使在其他未正确关联的内容上也是如此。换句话说，表的固定元素保持固定且不可滚动，即使该特定表不再是屏幕上可见的元素导致在表边界上自动滚动页面。粘滞方法没有这个缺点，因为卡住元素只有在相关表（主要父元素）在屏幕上可见时才会保持可见。一旦相对的桌子滚动并且它不再可见，则卡住的头部元素相应地消失。因此，您可以将不同的内容放入同一页面（普通文本，段落，图像，甚至是越来越多的不同表格），而不会产生任何与不相关的元素的混乱，这些元素在不是真正需要时保持可见。当然，对于js，您可以修复“固定”解决方案的这种不需要的行为，但“粘性”解决方案实现起来更简单，即使浏览器关闭了j，它也会起作用。

您可以在此处查看浏览器支持：https://caniuse.com/#feat=css-sticky

缺点：遗憾的是，粘性css规则不能直接在thead和tr元素上运行（它仍然是一个小错误）所以你需要将它瞄准添加＆gt;的第二个子元素。 到班级名称。

这意味着这个答案并没有取代本主题的其他内容，而是将它们集成在一起，使您可以选择最适合自己需要的答案。

＆＃39;使用CSS / HTML冻结窗格效果

6 个答案: