element table表格滚动条

2023-11-01

项目场景:

table表头过长需要添加滚动条


问题描述+原因

        一般情况表头过长,会自动出现滚动条,但是在大型项目开发过程中,有的情况会在总的母版文件中设置禁用滚动条,所以当需要滚动条时,找不到。


解决方案:

添加css样式 display:block;

/deep/::-webkit-scrollbar{
    display:block!important;
    height:6px;
    width:6px;
    background-color:#ddd;
}

===================================补充================================

修改滚动条样式

 

 .innerbox::-webkit-scrollbar {
            width: 4px;    
            /*height: 4px;*/
 }
 .innerbox::-webkit-scrollbar-thumb {
      border-radius: 10px;
     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      background: rgba(0,0,0,0.2);
   }
 .innerbox::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
     border-radius: 0;
     background: rgba(0,0,0,0.1);

  }

:-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track  外层轨道
::-webkit-scrollbar-track-piece  内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
 

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

element table表格滚动条 的相关文章

  • CSS 3 从底部渐变 n 像素 - Webkit/Safari

    有没有办法创建带有停止点的渐变n距离元素底部边缘的像素 例如 对于 Moz Firefox 它看起来像 moz linear gradient center bottom f00 2 d00 31px 还应该注意的是 该渐变有一个伴随渐变
  • 如何在 Ruby on Rails 中向 select_tag 添加类

    难以为此添加类标签 div class field div 这是我尝试过的 除其他外 div class field div
  • 使用 CSS 创建钟形

    我正在玩CSS中的形状 想要制作一个传统的钟形 想想圣诞钟声 这是我想要的一般形状 尽管我真的不关心顶部和底部的球 这是我到目前为止所拥有的 http jsfiddle net bhlaird NeBtU http jsfiddle net
  • CSS 文本装饰:反向

    我很惊讶 CSS 中没有 text decoration reverse 因为使用 JavaScript 来实现似乎非常尴尬 IE 将元素的前景色和背景色分别设置为父元素的背景色和前景色 我注意到了 JavaScript 技术here ht
  • 相当于Outlook中的浮动

    我在尝试着float left一些表 但是刚刚遇到一个大问题 outlook不支持float 好吧 然后我尝试使用表格对齐等 但没有运气 桌子只是显示在彼此下方 而不是彼此并排 对此我们能做些什么吗 PS 它在其他设备上工作得很好 它只是
  • 增加浏览器缩放时 mediaelement.js 音量控制混乱

    媒体元素2 12 0 这种情况仅发生在 FF 和 Chrome 中 而不会发生在 IE 或 Opera 中 导航到具有媒体元素播放器的网站内容后 甚至导航到媒体元素首页http mediaelementjs com http mediael
  • 将背景图像放入菱形容器中会导致容器失去形状

    标题总结得很好 我可以很容易地绘制菱形 但是当我将图像添加到背景时 它会为形状添加更多边 我似乎无法弄清楚为什么添加背景图像时会发生这种情况 任何意见 将不胜感激 这是我的代码 请原谅内联 css 我只是这样做 直到我有一个可行的解决方案
  • 使轮子在IE中旋转

    我有以下使用 JS 和 CSS 旋转轮子的代码 var prefix function if document body style MozTransform undefined return MozTransform else if do
  • 我应该如何使用 jcrop 在客户端裁剪图像并上传?

    我正在开发一个包含文件上传 HTML 控件的组件 在使用文件上传元素选择图像后 该图像将呈现在 HTML5 Canvas 元素上 这是带有示例代码的 JSFiddle https jsfiddle net govi20 spmc7ymp h
  • IE6 CSS 显示:表格修复?

    我正在开发一个网络应用程序 不幸的是它必须与有史以来最糟糕的软件一起工作 是的 即 ie6 我真的很喜欢CSSdisplay table and display table cell属性 但当然它在 ie 中不起作用 有没有人找到解决这个问
  • 如何使用纯 CSS 始终使灵活的正方形在视口中居中?

    我知道这个问题 高度等于动态宽度 CSS 流体布局 https stackoverflow com questions 5445491 height equal to dynamic width css fluid layout 但我想要更
  • 具有自定义尺寸的线性渐变

    我有这样的设计 它已经用 html css 创建 但我需要删除 1 和 5 的额外线条 这是通过添加绝对位置元素来创建灰线来实现的 但容器点的大小是响应式的 我的想法是为每个容器创建一个背景线性渐变 如下所示 for all backgro
  • Javascript Firefox - 如果 @import 存在于样式表中,则无法查询 cssRules - bug 或预期行为?

    如果 import 存在于 css 样式表中 我无法查询 cssRules 是否符合网络标准 或者知道 Firefox 的限制 注意 我正在从同一域导入 css 文件 var style rules document styleSheets
  • 使用 jQuery Mobile 和响应式布局/CSS 媒体查询是否多余?

    我正在退房http mediaqueri es http mediaqueri es 今天发现这些网站非常适合移动设备 所以我想知道将 jQuery Mobile 和响应 自适应布局与媒体查询一起使用是否是多余的 因为仅使用媒体查询似乎是一
  • 单击菜单外部以关闭菜单时,Bootstrap 导航栏“闪烁”

    我遇到了导航栏问题 当您单击菜单外部以关闭菜单时 导航栏会出现 闪烁 如果在单击菜单外时按住鼠标 则闪烁会持续存在 如下所示 我认为这可能与角度有关 而不是与CSS有关 主要是因为其他人未能在小提琴上复制它 上一个问题在这里 https s
  • 如何在移动设备上垂直堆叠 div 而在网页版本上保持水平放置?

    我添加了一些 div 标签以在 WordPress 帖子中创建两列 这是我使用的代码 container width 100 one width 50 float left two width 50 float right 我将上面的代码添
  • Tailwind CSS:在图像悬停时显示文本

    如何使用 Tailwind CSS 在图像悬停时显示文本 在图像悬停时显示文本 这是我的头像吗 我希望当用户将鼠标悬停在图像上时显示文本 哺乳动物 img src img cat categories mammals png alt mam
  • 显示带有 jQ​​uery-ui 自动完成功能的微调器

    我一直在到处搜索 但没有看到有人这样做 是否有可能拥有某种带有 jQ uery UI 自动完成功能的旋转器 加载器 1 8 获取数据时 我的解决方案是使用 ui autocomplete loading CSS 类 该类在 ajax GET
  • 底部带有三角形的蒙版图像

    我正在尝试找出如何最好地掩盖具有像这样的角度形状的 div 如果在这种情况下顶部 div 将是背景图像 并且两个 div 都是 100 宽度 我看过很多关于如何用圆形遮罩图像的教程 但没有关于如何遮罩红色区域等 div 边框的教程 我知道一
  • 去除iOS输入阴影

    在 iOS Safari 5 上 我必须遵循输入元素 顶部内部阴影 我想删除顶部阴影 错误 webkit appearance不保存 目前的风格是 input border radius 15px border 1px dashed BBB

随机推荐