Table显示滚动条（简单方法）

最新推荐文章于 2025-04-22 18:44:49 发布
最新推荐文章于 2025-04-22 18:44:49 发布
阅读量4.4k 收藏 1
点赞数 1
分类专栏： asp.net
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c1113072394/article/details/53327487
版权
本文介绍如何通过设置div和table的样式来实现Table显示滚动条的方法。具体包括使用overflow属性及固定div和table的尺寸。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Table显示滚动条，要先把table放到一个div中，div的长度和宽度要固定，控制overflow属性为scroll 

<div style="width:700px; height:225px; overflow:scroll;">
    ...
</div>


table的长度和宽度也要固定

<table cellspacing="0" width="732px" id="dataTableDetail" align="center">
    ...
</table>


如果你只要设置垂直的滚动条则用：overflow-y:scroll。
table 滚动条设置
weixin_44543412的博客
06-16 5214
table 滚动条设置 开发工具与关键技术：Visual Studio 前端 作者：盘子 撰写时间：2019年 6月 16日 在做项目过程中，遇到表格带有滚动条的页面。可以通过滚动条把过多的表格数据通过滚动方式进行显示查看。下面就如何设置和使用表格滚动条进行简单讲解与总结一下。 首先，这次设置使用表格滚动条，我是使用了layui table数据表格文档-layui.table。la...
layui表头跟随滚动条滑动_让layui table固定列也能监听滚动的方法介绍
weixin_39881155的博客
02-01 1755
目前table能滚动的区域是layMain这个区域，他会联动的去滚动表头和固定列，左右固定列实际他们本身的样式overflow是hidden的，所以本身不会出现滚动条，也就是说你把鼠标移动到左右固定列上去的话，它是无法被滚动的，比如下面这个效果图当然这个不是一两个样式就能搞定的事情，不然也就不需要整个帖子了，受限于layui table的实现方式特别是表头固定和左右列固定的实现方法，基本说只添加一...
TABLE滚动条
03-17
NULL 博文链接：https://sxpyrgz.iteye.com/blog/466492
table表格显示滚动条
weixin_60645637的博客
11-17 3033
在table父级元素中设置 overflow-y: auto;保持table父级元素和table大小相同；
el-table表格既出现横向滚动条，又出现纵向滚动条？
最新发布
ping
04-22 444
设置overflow-x属性：通过css为el-table的父容器设置overflow-x：auto或overflow-x：scroll。比如，给每个<el-table-column>设置固定宽度，且他们相加超过了<el-table>宽度 就会触发。外面table-container为500px 里面 el-table宽度设置为800px即可。当表格所有列的宽度总和超过表格容器宽度时，el-table会默认出现横向滚动条。在css中为包含el-table的容器设置固定的height。
table设置表格有滚动条
weixin_34038652的博客
06-16 455
table 设置表格有滚动条。 少说多做，代码中有注释： 1 &lt;!DOCTYPE HTML&gt; 2 &lt;html&gt; 3 4 &lt;head&gt; 5 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; 6 &
table显示滚动条
weixin_33995481的博客
12-29 102
Table显示滚动条，要先把table放到一个div中，div的长度和宽度要固定，控制overflow属性为scroll <divstyle="width:700px;height:225px;overflow:scroll;">...</div> table的长度和宽度也要固定 <tablecellspacing="0"width="732p...
解决layui数据表格table的横向滚动条显示问题
10-16
一个简单有效的方法是通过CSS样式强制body元素具有纵向滚动条，这样可以避免浏览器减少横向滚动条的宽度。具体操作是在HTML文档的部分添加如下样式代码： ```css body{overflow-y:scroll;} /*禁止刷新后出现横向...
jsp中实现带滚动条的table表格实例代码
10-21
`overflow:auto`属性使得当内容超过设定的宽度或高度时自动显示滚动条。 2. `<table>`元素：定义了表格，`border="1"`设置边框为1像素，`width="100%"`使表格宽度占容器的100%，`cellpadding="0"`和`cellspacing="0...
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
08-31
通过以上 CSS 调整，我们可以有效地解决 Bootstrap Table 在末行显示下拉菜单时滚动条遮挡的问题，同时保持工具栏的正常显示。不过，需要注意的是，直接修改库的默认样式可能会导致其他地方的样式异常，因此建议将...
jsp中为表格添加水平滚动条的方法
01-20
这种方法简单且有效，可以确保在浏览器最大化时，即便表格列数增多，也能通过水平滚动条查看完整内容。 需要注意的是，这种方法主要解决了`<th>`标签中的内容不换行的问题。若需让整个表格显示水平滚动条，还需要...
HTML页面table滚动条的实现
热门推荐
好久不见的流星
05-08 2万+
有很多页面由于数据量过大，会产生横纵滚动条。为了便于使用者观看，我们要把表头固定一下。根据这个需求写了个demo来实现这个功能。
锁定表列
grace_yan的专栏
07-03 754
锁定表格栏位范例网页BODY {    FONT: 12px 细明体; CURSOR: default}TD {    FONT: 12px 细明体; CURSOR: default}.title {    BORDER-RIGHT: #555 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 4px;
Table显示滚动条
weixin_34072159的博客
06-20 142
Table显示水平和垂直的滚动条，要先把table放到一个div中，div的长度和宽度要固定，控制overflow属性为scroll<div style="width:700px; height:225px; overflow:scroll;"> ...</div>table的长度和宽度也要固定<table cellspacing="0" ...
table滚动条
阿之阿佐
01-23 285
html> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8"> style type="text/css"> table { border: #888FEA 1px solid; border-spacing: 0px; text-align: center
table 滚动条
weixin_45142364的博客
07-27 1353
table 滚动条
如何使得table出现滚动条
iteye_20002的博客
09-24 461
用一个div将table 套住,把层的宽和高都设为定长,&lt;div style="ovoverflow-y:scroll;width:100%;height:100%"&gt; &lt;table&gt;    &lt;/table&gt;&lt;/div&gt;ovoverflow-y不要设置为visible...
el-table 竖向滚动条显示
04-09
要在 Element UI 的 `el-table` 组件中实现竖向滚动条的显示，可以通过设置表格的高度或者最大高度来触发滚动条的出现。以下是具体的实现方式： ### 实现竖向滚动条的方法 #### 方法一：通过设置 `height` 属性 如果希望表格的整体高度固定，并且超出部分的内容能够通过滚动查看，则可以在 `<el-table>` 标签上直接设置 `height` 属性。 ```html <el-table :data="tableData" height="500"> <!-- 表格列定义 --> </el-table> ``` 此方法会使得表格整体高度被限定为指定像素值（如上述例子中的 500 像素），当数据量超过该高度时，自动显示竖向滚动条[^1]。 #### 方法二：通过设置 `max-height` 属性 另一种更灵活的方式是使用 `max-height` 属性。这种方式允许表格根据内容动态调整大小，但在达到设定的最大高度之前不会显示滚动条。 ```html <el-table :data="tableData" max-height="500"> <!-- 表格列定义 --> </el-table> ``` 在此配置下，只有当表格内容的高度超过了 500 像素时才会激活滚动功能[^3]。 #### CSS 自定义滚动条样式 (可选) 为了提升用户体验或满足设计需求，还可以自定义滚动条的外观。例如，改变颜色、宽度以及圆角等特性。下面是一个简单的示例用于美化 `.el-table__body-wrapper` 中的滚动条： ```css /* 修改滚动条样式 */ .el-table__body-wrapper { &::-webkit-scrollbar { width: 8px; background-color: #f5f5f5; } &::-webkit-scrollbar-thumb { background-color: #aaa; border-radius: 4px; } &::-webkit-scrollbar-track { background-color: #f5f5f5; } } ``` 以上代码片段展示了如何利用 Webkit 浏览器支持的伪元素 `-webkit-scrollbar` 来定制视觉效果[^3]。 ### 注意事项 - 如果存在固定的右侧列 (`fixed="right"`)，可能需要额外处理其定位问题以防止布局错乱[^2]。 - 当前解决方案适用于基于 Chromium 内核的现代浏览器；对于其他类型的浏览器兼容性需单独测试验证。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值