html - 可滚动？

转载 作者：技术小花猫 更新时间：2023-10-29 11:40:31 24 4

我想要一个右边有滚动条的表格。
我想在没有任何插件(jQuery)的情况下仅使用 css 来完成此操作。
表头应该保持固定。

我需要做什么才能让它正常工作？

最佳答案

您承担了一项任务，如果您成功了，您将成为英雄。我尝试了这个和最简单的事情——定位:固定； -- 是不可能的。我必须将所有 复制到一个新对象中。但是，当您这样做时， 元素的水平间距全部消失，因此标题不再与 对齐。我最终做了这样的事情:

首先，放弃ie6和ie7。那些家伙没有希望。

1. 制作表格的两份副本，一份 body 不可见而 可见，另一份则相反。

2. 给出 z-index:1;到带有可见 的表格。

3. 给出 z-index:0;到带有可见 的表格。

4. 处理水平滚动，但直到您发现 onScroll 不是 ie8 事件(更不用说 ie6)之后，您必须每隔十分之一秒左右休息一次 setInterval 只是处理在 ie8 中左右滚动 。

这将为您提供一个在两个轴上无限滚动的表体，以及一个仅在 x 轴上滚动的表头。几乎适用于 FF、Chrome 和 Safari。但是在ie8中不稳定。真正的皮塔饼。

祝你好运，如果你成功了，请写信!

关于html - <table><tbody> 可滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5345390/

24 4 0

文章推荐： html - 带 CSS/HTML 的页码

文章推荐： linux - bash 中只有一个变量的 if 语句的计算结果是什么？

文章推荐： linux - 记录Bash交互，分别保存STDIN、STDOUT

文章推荐： c++ - 如何在主程序中解析共享库的外部符号？

• python - 抓取表仅返回 "tbody"而不是 tbody 的内容

  我正在尝试从该网站上名为“燃料混合图”的表中提取数据:https://www.iso-ne.com/isoexpress/我正在使用 BeautifulSoup 读取 HTML 并提取下面列出的表格，

• html - 在 tbody 上没有固定高度的动态 tbody 滚动

  我一直在为这个问题伤脑筋。 我有一个 div 布局，其中某些 div 可以折叠或显示。在这些 div 下方是一个带有表格的 div。我想要的是当内容不再适合页面时，tbody 变得可滚动。我不能给 t

• css - 在具有多个 tbody 的表中如何在 tbody 元素之间创建一些空间

  我试图在包含多个 tbody 元素的表的 tbody 部分之间创建一些空间，即间隙，但没有取得任何成功。怎么做到的？ .

• html - 一个 tbody 可以在另一个 tbody 里面吗？

  是否可以像这样在外部 tbody 中有一个内部 tbody: 这是一个示例 CSS: .class1 {background-color:#ff0000;} .class2 {b

• JavaScript - 添加行在 tbody 标签后添加行，需要在 tbody 内添加

  我在 JavaScript 中添加行时遇到问题。一切正常，但在 tbody 标签之后添加了行。我需要在 tbody 中添加。 片段: function deleteRow(row) { var i

• javascript - 如何在表的多个 tbody 中使用 jquery 删除选定的 tbody

  我有一个表，并使用 jquery 在我的表中添加了更多 tbody。现在我想在单击删除按钮时删除选定的 tbody，我的代码删除一行而不是删除所有选定的 tbody。怎么办？我的代码是:

• html - 当 tbody 设置为其容器的宽度时，我可以在 tbody 的溢出上实现水平滚动吗？

  我正在努力实现以下目标: 包含 div 内的 table 元素 table 没有设置width(可以是 100%)，但它不能比包含的 div 宽 table 的单元格是固定宽度的(使用 width 和

• html - 垂直滚动在 tbody 中无法正常工作，打破了之前的 tbody 宽度

  我有一个表格，我需要在 tbody 中添加一个垂直滚动条。我看过一些代码但不适合我或者我不理解。我也不太擅长CSS。我添加了一个 div 并将我的 tbody 放在那里。它适用于滚动，但 tbody

• html - 使用 tbody 的新 css 在表中创建可滚动的 tbody

  我有一个带有滚动 tbody 的工作表，通过使用带有以下内容的 css。 tbody{ overflow:auto; } thread > tr, tbody{ display:block;

• html - 为什么 tbody 之间的 div 在渲染时自动移出 tbody？

  这是我的代码: test 运行上面的代码后，自动变成了这样: test

• css - tbody td 边框不随 tbody 中的内容滚动溢出 :auto;

  当我滚动浏览这个 overflow:auto; 时，我无法让这些 td 的边框跟随它们的行； .关于修复的任何想法？ 注意:设置 table-layout:fixed 或使行 display:blo

• javascript - 如何使 tbody 子级大小与 thead 之后创建的第一个 tbody 大小相同

  嗨，我有一个问题。我想问一下如何让tbody子元素的大小与thead后第一行的大小相同？ 这是我的代码..请帮助我..您可以编辑我的 fiddle 或给出答案 var theadFlag =

• jquery - 选择的 tbody 不使用 jquery 从多个 tbody 中删除

  我知道这是一个非常简单的查询，但我花了一整天时间让它工作，但运气不好。我正在尝试删除任何带有其 ID 的 tbody，但它不是通过我在网上找到的任何方法删除的。我在这里犯了什么错误？ $(do

• javascript - 在滚动 tbody 和 thead 列时修复表头与 tbody 列对齐

  这是固定外部高度的表格，我需要滚动开始时，thead 将被固定，tbody 将滚动显示每列的标题。是否有任何想法将表格的标题固定在顶部和表格的内部内容将滚动。 .max_height{max-heig

• jquery 说 tbody.length = 1 即使没有

标签存在

这个问题在这里已经有了答案: Why do browsers insert tbody element into table elements? (2 个答案) 关闭 9 年前。 我有一个非常简单的

haskell - xml-conduit:如何仅获取第一个 tbody 和该 tbody 的直接子 tr？

我正在使用 xml-conduit 和 Text.XML.Cursor 来导航一些带有嵌套表的糟糕 html。有一个带有两个 tbody 标签的表，我想要第一个 tbody 的直接子 tr 标签。这是

javascript - DataTable.js - 对于通过 Ajax 调用传入的某些数据集，

内不会显示任何数据

对于某些数据集，数据表中不显示任何数据 - 仅显示列标题或列标签。即使页面上的代码没有更改，也会发生这种情况。有问题的数据在浏览器开发工具 Console.logs 中正确显示。 如下所示，DataS

javascript - 如何使用 Javascript/Jquery 将 Child 追加为 tbody 中的第一行并拥有自己的 tbody

我需要将 json 中的数据作为表中的行追加。我需要将 id="project"的行添加为自己的 tbody 中的第一行。如果检测到新项目，将创建新的 tbody，并且项目和任务将拥有自己的 tbod

javascript - 在页面加载时隐藏 tbody，永久显示 thead 组，使用 jQuery 在下拉选择中显示 tbody

我试图首先在页面加载时仅显示 thead 和几行数据(永久显示分组在 thead 下的数据)。加载页面后，我希望选定的对象选择(不显示任何 tbody 组)并通过选择顶部下拉菜单中的选项(以显示选定的

css - 将 thead 和 tbody 元素与固定 thead 和使 tbody 可滚动的能力对齐

我已将以下 CSS 应用于我的表格。 thead, tbody { display: block; } tbody { height: 200px; overflo

技术小花猫

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

• objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
• iphone - 如何将 CGFontRef 转换为 UIFont？
• ios - 以编程方式关闭标记的信息窗口 google maps iOS
• ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"

滴滴打车优惠券免费领取

全站热门文章

• 微软憋大招：SQLServer+Copilot=地表最强AI数据库！
• 双十一购物攻略：如何利用爬虫技术获取历史价格趋势，理性购物不踩雷
• Mysql篇-BufferPool中的三大链表
• IBM开源的文档转化利器「GitHub热点速览」
• 使用C#入门深度学习：Pytorch基础
• RL基础|如何使用OpenAIGym接口，搭建自定义RL环境（详细版）
• 开源-Ideal库-获取特殊时间扩展方法（四）
• LVM使用与扩容总结
• 现代IT基础设施管理（1）：Terraform初识和小试牛刀
• 推荐一个Star超过2K的.Net轻量级的CMS开源项目

Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com