使用 CSS/HTML 的“冻结窗格”样式效果

'Freeze panes'-style effect using CSS/HTML

提问by Mat Richardson

Is it possible/easy to create a web page which would act like a Microsoft Excel spreadsheet that has 'Freeze panes' applied to it? By this, I mean that a header and sidebar should remain fixed in their places but scroll down/right when the page is scrolled.

是否有可能/容易创建一个网页，它就像一个应用了“冻结窗格”的 Microsoft Excel 电子表格？我的意思是，标题和侧边栏应该保持固定在它们的位置，但在滚动页面时向下/向右滚动。

I need something like this, except that I want it to be applied to a whole page and not a table.

我需要像这样，但我希望它被应用于整个页面，而不是一个表。

回答by jakee

This can be don with switching to position: fixed.

这可以通过切换到position: fixed.

For example a div with the class

例如一个带有类的 div

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

will remain fixed in the upmost 100px of your browser viewport when you're scrolling.

当您滚动时，将在浏览器视口的最高 100 像素中保持固定。

This fiddle demonstrates the effect in both vertical and horizontal direction. http://jsfiddle.net/ukzYf/1/

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

Hope this helps.

希望这可以帮助。

回答by zessx

Are you looking for position: fixed?

你在找position: fixed吗？

Here's a simple working example for you:

这是一个简单的工作示例：

.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;
}

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

回答by Jatin Marwah

I think you are looking something like this.

我想你看起来像这样。

May be this can help: angular-table-freezepane https://jatinmarwah.github.io/angular-table-freezepane/app/#/

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

回答by willy wonka

As known the css rule

众所周知的css规则

position: fixed;

applied to table headers usually brakes the match between them and the corresponding columns into the tbody part of the table because it kind of "detaches" the targeted html element from the DOM normal stream and makes it to act as an independent element. It means that if any of the table body text into any td element is edited and the width of the corresponding column varies accordingly to the new text length, the thead doesn't stay in sync width it, generating bad columns alignment. To solve it you have to add a fixed width to each column to prevent broken layout due to columns miss alignment.

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

So I would like to add a further CSS solution that doesn't have such drawback:

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

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

Insert the following code

插入以下代码

class = "stickyClass"

into the HTML tr element you what to target.

在 HTML tr 元素中输入您要定位的内容。

How does it work? It will make all nested th elements (header cells) to behave as usual until the scroll top indicated into the second css rule is achieved (it is possible to set a value different from 0 to match your needs). After that scroll amount the element chances its behavior and act as a fixed element. The advantage of the sticky rule is that it keeps the thead-tbody columns width correspondence so the table layout doesn't break even if the td content text is edited and changes the width of the column itself. So it is a great alternative to use in elastic table layouts.

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

Also if you have a long document with a table and even other content, using the fixed css solution makes the table head to stay visible even on other content that isn't properly related. In other word the fixed element of the table stays fixed and non scrollable even if that specific table isn't anymore the element visible on screen cause of scrolling the page it self over the table boundaries. The sticky approach doesn't have this drawback because the stuck element stays visible only until the related table (the main parent element) is visible on screen. Once the relative table scrolls away and it isn't visible anymore the stuck head element disappears accordingly. So you can have different content into the same page (normal text, paragraphs, images, and even more and more different tables) without creating any mess with elements not related that stay visible when they aren't really needed. Of course with js you can fix this unwanted behavior of the "fixed" solution, but the "sticky" solution is more simple to implement and it acts even if the browser has js switched off.

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

Here you can have a look on the browser support: https://caniuse.com/#feat=css-sticky

在这里你可以看看浏览器支持：https: //caniuse.com/#feat=css-sticky

Drawback: unfortunately the sticky css rule doesn't work directly on thead and tr elements (it is still a little buggy) so you need to aim it to the th sub elements adding > thto the name of the class.

缺点：不幸的是，粘性 css 规则不能直接在 thead 和 tr 元素上工作（它仍然有一些问题），因此您需要将其指向第 th 个子元素，将> th添加到类的名称中。

This means that this answer doesn't replace the others of this topic but integrates them allowing you to choose the one that best fits your own needs.

这意味着此答案不会取代本主题的其他答案，而是将它们集成在一起，让您可以选择最适合您自己需求的答案。

回答by bPratik

I believe you are looking for something as demoed in this fixed layout example.

我相信您正在寻找这个固定布局示例中演示的东西。

If so, see the code and tutorial here:

如果是这样，请在此处查看代码和教程：

We can make a html element fixed using the css position attribute. Also to make an element fixed we need to give the at least one coordinate point from top,left,bottom,right. The syntax for making a fixed position element is shown below. In these examples provided below i have used position fixed divs to display the elements in static position on window scroll.

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

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

回答by Hans Peter M?ller

I use this:

我用这个：

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

I define the columns width with bootstrap css col-md-xx. Without defining the columns width the auto-width of the doesn't match the . The 102% percent is because you lose some sapce with the overflow

我使用 bootstrap css col-md-xx 定义列宽。如果没有定义列宽， 的自动宽度与 . 102% 的百分比是因为您因溢出而损失了一些空间