这可以在CSS类中使用position: fixed行来完成。
例如，具有类的div

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

当你滚动的时候，将保持固定在浏览器 windows 的最高100px。
这把小提琴在垂直和水平方向上都演示了效果。http://jsfiddle.net/ukzYf/1/
希望这个有用。

你在找position: fixed吗？
下面是一个简单的工作示例：

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

我觉得你看起来像这样。
可能这会有所帮助：Angular 表冻结https://jatinmarwah.github.io/angular-table-freezepane/app/#/

我相信你正在寻找this fixed layout example中演示的东西。
如果是，请参见the code and tutorial here：
我们可以使用css的position属性来固定一个html元素。同样，要使一个元素固定，我们需要从上，左，下，右给予至少一个坐标点。固定位置元素的语法如下所示。在下面提供的这些例子中，我使用了position fixed div来显示窗口滚动时的静态位置元素。

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

我用这个：

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

我用bootstrap css col-md-xx定义了列宽。如果不定义列宽，的自动宽度将不匹配。102%的百分比是因为溢出会丢失一些空间

众所周知，css规则

position: fixed;

应用于表格标题通常会将它们与表格tbody部分中相应列之间的匹配中断，因为它将目标html元素从DOM普通流中“分离”出来，并使其作为一个独立元素。这意味着如果编辑了td元素中的任何表格主体文本，并且相应列的宽度根据新文本的长度而变化，标题没有保持同步宽度，产生错误的列对齐。要解决这个问题，你必须添加一个固定的宽度到每列，以防止由于列未对齐而破坏布局。
因此，我想添加一个进一步的CSS解决方案，没有这样的缺点：

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

插入以下代码

class = "stickyClass"

到HTMLtr元素中，您要定位什么。
它是如何工作的？它会使所有嵌套的th元素（标题单元格）照常运行，直到达到第二个css规则中指示的顶部滚动（可以设置一个不同于0的值来满足你的需要）。在滚动量之后，元素会改变它的行为，并作为一个固定元素。粘性规则的优点是它保持了头-tbody列宽对应关系，这样即使td内容文本被编辑并改变了列本身的宽度，表格布局也不会中断，因此它是弹性表格布局的一个很好的替代方案。
此外，如果您有一个包含表格甚至其他内容的长文档，使用固定的css解决方案可以使表格标题保持可见，即使在其他内容上没有适当的关联.换句话说，表格的固定元素保持固定和不可滚动，即使特定的表格不再是屏幕上可见的元素，因为滚动页面本身超过了表格边界.粘性方法不会'我没有这个缺点，因为被卡住的元素只有在相关表被打开之前才能看到（主要的父元素）在屏幕上可见。一旦相关表滚动离开，它就不再可见，相应的头元素也会消失。因此，您可以在同一页面中放置不同的内容（普通文本、段落、图像甚至越来越多不同的表），而不会对不相关的元素造成任何混乱，这些元素在实际不需要时仍然可见。当然，使用js你可以修复“固定”解决方案中不想要的行为，但是“粘性”解决方案实现起来更简单，即使浏览器关闭了js，它也会起作用。
您可以在这里查看浏览器支持：https://caniuse.com/#feat=css-sticky
缺点：不幸的是，粘性css规则不能直接作用于head和tr元素（它仍然有一点小缺陷），所以你需要将它对准th子元素，在类名中添加**〉th**。
这意味着这个答案不会取代本主题的其他答案，而是将它们整合在一起，让您可以选择最适合自己需要的答案。