layui table 没有滚动条
时间: 2023-05-13 17:07:12 浏览: 73
可以尝试在 table 的配置项中设置 height 属性,例如:
```
table.render({
elem: '#demo',
height: 400, //设定容器高度
url: '/demo/table/user/',
cols: [[
{field:'id', title: 'ID', width:80},
{field:'username', title: '用户名', width:80},
{field:'sex', title: '性别', width:80, sort: true},
{field:'city', title: '城市', width:80},
{field:'sign', title: '签名', width: 177},
{field:'experience', title: '积分', width: 80, sort: true},
{field:'score', title: '评分', width: 80, sort: true},
{field:'classify', title: '职业', width: 80},
{field:'wealth', title: '财富', width: 135, sort: true},
]]
});
```
如果表格数据超过了设定的高度,就会出现滚动条。
相关问题
layui数据表格滚动条
如果你想在layui数据表格中添加滚动条,可以在表格容器外面再套一个div,给这个div设置固定高度和overflow-y:scroll属性,然后将表格放在这个div里面即可。示例代码如下:
```html
<div style="height: 300px; overflow-y: scroll;">
<table class="layui-table">
<!-- 表格内容 -->
</table>
</div>
```
这样就可以在表格超出高度时显示滚动条了。
修改layui表格滚动条样式
要修改layui表格的滚动条样式,可以通过以下步骤实现:
1. 首先,找到layui样式文件(通常是一个CSS文件),可以在你的项目中的 `layui/css` 目录下找到 `layui.css` 或者类似的文件。
2. 打开 layui样式文件,搜索并找到 `.layui-table-body` 类的样式。这个类定义了表格体部分的样式。
3. 在 `.layui-table-body` 类中添加如下代码来修改滚动条样式:
```css
.layui-table-body {
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #999999 #f5f5f5;
}
.layui-table-body::-webkit-scrollbar {
width: 6px;
}
.layui-table-body::-webkit-scrollbar-thumb {
background-color: #999999;
}
.layui-table-body::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
```
这段代码将设置滚动条为细线样式,滚动条颜色为 `#999999`,滚动条轨道背景色为 `#f5f5f5`。你可以根据需要进行调整。
4. 保存并应用修改后的样式文件,重新加载页面,你应该能看到修改后的滚动条样式已生效。