实现表格标题栏固定，当内容超出指定宽度出现滚动条后会破坏原有布局，这时可以用perfect-scrollbar插件

最新推荐文章于 2022-08-25 10:16:20 发布
最新推荐文章于 2022-08-25 10:16:20 发布
阅读量648 收藏
点赞数
分类专栏： HTML 文章标签： 标题栏固定
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huihuikuaipao_/article/details/85322922
版权

方法一：标题栏和内容在同一表格

1、如果在同一表格标题栏必须要加<thead></thead>标签，内容必须要用<tbody></tbody>标签包裹，并使两者变成块元素。

 

 

 

这样就可以得到如下效果了

 

方法二：也可以用两个表格实现

 

 

 

小骨格子屋
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
滚动条出现，挤压页面宽度，导致布局错乱的三种解决方法
qq_36132291的博客
04-21 1万+
出现原因 页面内容超出高度，浏览器出现滚动条的时候，因为滚动条是占位的，所以页面会被挤压，导致页面内容出现错乱。 解决方案一：新属性 overlay （目前仅chrome支持） chrome下overflow有个新的属性值overlay，这个属性简直就是为了这个问题而生，他和auto有点像，但是区别就是在触发滚动条时候并不挤压空间。但是非常遗憾，这个属性值目前只有chrome支持。 html { overflow-y: overlay; } 解决方案二：margin-right: calc(100%
perfect-scrollbar 如何使用
最新发布
weixin_44216637的博客
08-01 1247
4、初始化 perfect-scrollbar：在你的 JavaScript 或 TypeScript 代码中初始化 perfect-scrollbar。2、导入 perfect-scrollbar：在你的项目中，根据需要导入 perfect-scrollbar。当滚动到达 y 轴末端时触发此事件（对于无限滚动很有用）。当 y 轴向任一方向滚动时会触发此事件。当 x 轴向任一方向滚动时会触发此事件。当滚动到达 y 轴起点时触发此事件。当滚动到达 x 轴起点时触发此事件。当滚动到达 x 轴末端时触发此事件。
CSS3弹性布局 滚动条样式
weixin_45086164的博客
08-25 578
CSS3弹性布局 滚动条样式
css隐藏滚动条同时不影响布局
chunchun_H
03-05 862
最近在页面中有撑出滚动条的需求，但又不想看到浏览器那丑丑的滚动条，所以研究了下解决办法： .scroll-hidden{ width:calc(~"100% + 15px"); padding-right: 15px; overflow: auto; } 将大盒子的宽度设置为100%，同时加上滚动条的宽度，给大盒子padding-right滚动条的宽度，这样就可...
解决出现滚动条造成布局改变
小朱的专栏
03-22 3225
html { width:100vw; overflow-x:hidden; }
perfect-scrollbar：简约但完美的自定义滚动条插件
02-04
完美滚动条简约但完美的自定义滚动条插件官方文档可以在找到。 要阅读版本小于1.0的文档，请访问 。为什么选择完美滚动条？ perfect-scrollbar是简约但完美的（对我们来说，对于大多数开发人员而言）scrollbar插件。...
vue2-perfect-scrollbar:Vue.js包装器提供完美的滚动条
05-02
vue2-perfect-scrollbar Vue.js简约但功能强大的包装器，可完美显示滚动条 您在寻找与Vue3兼容的版本吗？ 检查 为什么创建它？ 因为我 :red_heart: 在我的项目中使用（ :raising_hands: ）。 也是因为github上的...
vue3-perfect-scrollbar:Vue.js包装器为版本3提供了完美的滚动条
04-29
vue3-perfect-scrollbar Vue.js简约但功能强大的包装器，可完美显示滚动条为什么创建它？ 因为我 :red_heart: 在我的项目中使用（ :raising_hands: ）。 也是因为github上的当前解决方案已经过时或过于复杂。你为...
react-perfect-scrollbar:完美滚动条的React包装
05-02
React完美滚动条 这是一个包装，允许在React中使用 。 要阅读版本小于1.0的文档，请访问 。 用法 安装软件包npm install react-perfect-scrollbar -S如果您具有用于css文件的加载器，请导入css文件： import '...
tailwind-scrollbar:Tailwind CSS的滚动条插件
04-28
Tailwind CSS的滚动条插件 为Firefox和基于Webkit的浏览器中的滚动条添加样式实用程序。安装yarn add -D tailwind-scrollbar 或者npm install --save-dev tailwind-scrollbar 将其添加到Tailwind配置的plugins数组中...
滚动条控件-ScrollBar-综合运用
10-20
一个小的学生资料管理，运用了几个控件，包括滚动条，按钮，列表，文本框，下拉列表，并且附带运用的函数附注说明，对初学者很有帮助。
滚动条挤占内容宽度、破坏布局的解决方案
热门推荐
Beijiyang
08-21 3万+
问题 当内容增多，滚动条从无到有时，它的出现挤压了内容宽度，导致原来设计好的布局被破坏。 原因 滚动条的宽度是计算到内容 content 里的。 解决思路 增加一个中间层，使得外部容器宽度保持设计宽度，内部元素排列保持不变。 具体案例 使用 antd 的 Modal 弹窗，基于其最简单的基本示例，如图： 希望的效果： 弹窗定宽定高； 一排4个，宽度、边距固定； 当总...
CSS 元素超出部分滚动, 并隐藏滚动条（2种方法）
boy火巨的博客
09-14 8697
方法一, 利用 css 3 的新特性  -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;超出部分隐藏滚动条&lt;/title&gt; &lt;/head&amp
使用 scrollbar-gutter CSS 属性解决由滚动条引起的不必要的布局偏移
12-11 4179
使用 scrollbar-gutter CSS 属性解决由滚动条引起的不必要的布局偏移
滚动条出现时影响布局问题
qq_32973061的博客
11-19 1289
放置滚动内容的盒子设置固定宽度， 其父盒子的 宽度设置滚动内容宽度+20px（可调整）、固定高度和overflow-x:hidden,overflow-y:scroll; 此法是单独设置 父盒子一定宽度展示滚动条，滚动条区域和展示内容盒子分开设置。并且滚动条会成为设置滚动条盒子padding的一部分 ...
perfect-scrollbar 一个全浏览器适用的自定义scrollbar，使用方法 中文文档
m0_37895683的博客
11-29 1万+
在开发过程中为了保持界面样式的一致性，需要自定义scrollbar的样式，可是只有chrome可以定义样式，IE只能设置颜色，火狐是直接不可以设置，于是就找了这个库，它是github开源的，但没有中文文档，只有英文的，下面是我翻译的中文文档，英语水平不好，有错请见谅，可以评论告诉我修改。 源码以及英文api：GitHub地址：点我点我 使用中的一些常见问题可以在这个官方wiki中找到：点我点我...
element table滚动条占宽度_element-ui使用perfect-scrollbar修改table等滚动条
weixin_39710003的博客
12-19 797
首先是perfect-scrollbar的安装。选择插件而不是直接改css的原因，是因为需要兼容火狐你懂的。npm install perfect-scrollbar --save-devpublic.css，scroll-item是自定义类，类似于指令效果，加上clssname就自动生成scrollbar。之所以不用指令，是因为无法修改element-ui组件，用classname方便一点。tr...
perfect-scrollbar滚动条插件的基本使用
guoyiq的博客
04-19 1万+
今天用了perfect-scrollbar做了一个一般的滚动条，记录一下html方面只需要加一个id和一个类名就行了css方面最外层要有高度，我的这个高度是在js里面动态加的，所以没往上写js上看着api上写就行每个属性api上都有介绍有的情况下需要丢成异步操作才行...
vue中使用perfect-scrollbar实现鼠标文本栏滚动
06-03
你可以按照以下步骤在Vue项目中使用perfect-scrollbar插件来实现鼠标文本栏滚动： 1. 安装perfect-scrollbar插件： ```bash npm install perfect-scrollbar --save ``` 2. 在需要使用的Vue组件中引入插件： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小骨格子屋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值