4

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

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

4

6 回答 6

8

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

例如带有类的 div

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

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

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

希望这可以帮助。

于 2012-06-14T09:42:40.543 回答
3

你在找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>

于 2012-06-14T09:43:39.427 回答
1

我想你看起来像这样。

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

于 2015-08-23T09:31:00.380 回答
0

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

如果是这样，请参阅此处的代码和教程：

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

.fixed_elements{
    position:fixed;
    top:100px;
}
于 2012-06-14T09:46:46.380 回答
0

我用这个：

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

我使用引导 css col-md-xx 定义列宽。如果不定义列宽，则 的自动宽度与 . 102% 是因为溢出会丢失一些空间

于 2015-06-24T19:51:55.750 回答
0

众所周知的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 可以修复“固定”解决方案的这种不需要的行为，但“粘性”解决方案更易于实现，即使浏览器关闭了 js，它也会起作用。

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

缺点：不幸的是，粘性 css 规则不能直接在 thead 和 tr 元素上起作用（它仍然有点错误），因此您需要将其瞄准第 th 个子元素，并将> th添加到类的名称中。

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

于 2018-05-16T17:52:37.453 回答