如何在滚动时锁定表格的第一行和第一列(可能使用 JavaScript 和 CSS)?

2023-11-24

当您激活“冻结窗格”时,如何创建一个第一行和第一列都被锁定的表格,就像在 Excel 中一样?我需要表格水平和垂直滚动(存在很多解决方案,但只允许垂直滚动)。

因此,当您在表格中向下滚动时,第一行将保持不变,因为它具有列标题。这可能最终会出现在thead,也可能不是,无论什么都可以使解决方案变得更容易。

当您向右滚动时,第一列保持不变,因为它包含行的标签。

我很确定仅靠 CSS 是不可能的,但是有人能指出我的 JavaScript 解决方案吗?它需要在所有主要浏览器中工作。


哦,好吧,我查找了带有固定列的可滚动表格,以了解这一特定要求的需要,而您的问题就是其中之一,没有明确的答案。

我回答了这个问题具有固定滚动行和固定滚动列的大型动态大小 html 表格这启发我以插件的形式展示我的作品https://github.com/meetselva/fixed-table-rows-cols

该插件基本上将格式良好的 HTML 表格转换为具有固定表头和列的可滚动表格。

用法如下,

$('#myTable').fxdHdrCol({
    fixedCols    : 3,       /* 3 fixed columns */
    width        : "100%",  /* set the width of the container (fixed or percentage)*/
    height       : 500      /* set the height of the container */
});

您可以检查演示和文档在这里

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在滚动时锁定表格的第一行和第一列(可能使用 JavaScript 和 CSS)? 的相关文章

  • Vue 多个组件位于一个包/文件中

    假设我想创建一个 UI 包 如何将多个组件放入一个 JS 文件中 通常我会将不同的组件放在不同的文件中 import ButtonText from ButtonText vue import ButtonIcon from ButtonI
  • 自动溢出的容器中不会出现滚动条(IE10、Windows Phone 8)

    我有一个容器 比方说div with overflow auto 其中的元素完全按照预期滚动 但不会出现典型的触摸滚动条 我尝试设置 ms overflow style auto明确地 但没有任何改变 浏览器 IE10 设备 Windows
  • 下拉菜单导致滚动条

    我用过这个W3C 的示例 http www w3schools com bootstrap bootstrap dropdowns asp div class dropdown div
  • jQuery 选择器在控制台中不起作用

    我一辈子都无法解决这个问题 我正在运行 js 容器状态 是页面上正在运行的 js 的控制台日志 它显示一个选择器 但如果我想在控制台中执行任何操作 它只会返回 null 我假设我在某个地方过度编写了 jQuery 函数 就好像我调用了 jQ
  • 如何使链接悬停时的背景图像模糊?

    当您用鼠标光标悬停链接时 我想让我的背景图像模糊 5 像素 有什么简单的方法可以实现这一点吗 我有点纠结于类和 id 在这里 pic background url http www metalinjection net wp content
  • LESS CSS 在媒体查询中设置变量?

    我正在开发一个专门针对 iPad 的网站 为了使我的网站能够在视网膜显示屏 iPad 和旧版本 iPad 上运行 我想在媒体查询中的 LESS CSS 中设置一个变量 例如 media all and max width 768px rat
  • 向 Twitter Bootstrap 添加新字体系列

    我怎样才能按照他们的方式将新的字体系列添加到 twitter bootstrap 中 他们使用一种叫做 woff 的东西 我正在尝试将 roboto 添加到 css 文件中 我怎样才能像他们那样做 woff 的事情呢 font face f
  • 如何使用 JavaScript 禁用滚动条?

    当我仅在 Internet Explorer 7 中显示代表模式窗口的 div 时 我需要锁定浏览器滚动条 谷歌搜索我发现我可以使用document body style overflow hidden 但这不适用于 IE7 我也尝试过do
  • javascript 代码只能在函数之外工作 - 为什么?

    为什么这段代码不能像下面写的那样工作 但如果我注释掉function testBgChange 并将代码保留在该函数内 它可以正常工作 如果我将代码保留在函数中然后调用该函数 会有什么区别
  • 透明、无边框文本输入

    如何删除周围的边框
  • 变量值的 swap() 函数[重复]

    这个问题在这里已经有答案了 我无法达到下面这个交换函数的预期结果 我希望将值打印为 3 2 function swap x y var t x x y y t console log swap 2 3 任何线索将不胜感激 您的函数正在内部交
  • 禁用 iframe 中的滚动

    有没有办法在 iframe 中禁用所有滚动 我有一个 iframe 其中内容超出了 iframe 尺寸 设置scrolling no 只会删除滚动条 但不会禁用滚动 我无法控制 iframe html 的头部 所以我无法设计它的样式 有任何
  • iOS 11 getUserMedia 不起作用?

    苹果公司发表声明称getUserMedia将在 iOS 11 上完全正常运行 安装 iOS 11 Beta 版本 5 后 我确实收到一条消息 表明我的网站请求访问我的相机和麦克风 但似乎是这样的 video src window URL c
  • “WebSocket 在连接建立之前已关闭”是什么意思?

    我正在使用 JavaScript 和联盟平台 http www unionplatform com我该如何诊断这个问题 非常感谢 如果你去http jsbin com ekusep 6 edit http jsbin com ekusep
  • Excel VBA 自动过滤子字符串

    我的 Excel 中有多行 其中 D 列为 TDM 02 Bundle Rehoming 5 NE TDM 02 Bundle Rehoming 23 NE IP 02 Bundle Rehoming 7 NE 等 请注意 大多数情况下 N
  • 验证单个单选按钮在可用的 javascript 验证脚本中不起作用

    我随机生成了单选按钮系列 例如
  • CSS交付优化:如何推迟CSS加载?

    我在尝试着优化 CSS 交付遵循针对开发人员的谷歌文档https developers google com speed docs insights OptimizeCSSDelivery example https developers
  • 如何在不刷新页面的情况下更新页面 html 和 url

    我想知道是否有人可以指出我学习如何在不刷新页面的情况下更新页面 html 和 url 的方向 是否有任何现有的 javascript 库可以处理这个问题 或者有一本涵盖此类事情的好书 这是使用该效果的示例网站 http onedesignc
  • 如何防止IE11弹出(您确定要离开此页面)

    我正在处理一个页面 除了一个下拉菜单可供选择外 我无需输入任何内容 但在 IE11 中 当我尝试转到下一页时 它会弹出该消息 我想阻止这种弹出的发生 所以我只是想知道 IE11 中弹出窗口的默认行为是什么 因为它不会出现在 Chrome 或
  • CSS3 背景渐变未验证,有人可以告诉我为什么吗?里面的代码示例

    有人能告诉我为什么下面的 css 没有验证吗 我一直在尝试自己研究这个问题 但没有运气 我读过的所有文档都说这是在 css3 中进行渐变的正确原因 header color white font size 12px font family

随机推荐