Laravel-admin 表格添加滚动条

laravel-admin数据添加横向滚动条

当列数据过多时再小屏幕显示会有挤压现象,可以通过css的媒体查询添加横向滚动条
可以在全局添加可以在当前页面添加

  1. 创建css文件
    laraveladmin 创建文件public/static/css/scroll_bar.css将一下代码添加进去 (css可根据自己需要进行调整)
.box>.box-body>table>thead>tr>th{
    min-width: 4em;
}
@media screen and (max-width: 1600px){
    .box>.box-body{
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
    }
    .box>.box-body>table>thead>tr>th{
        min-width: 6em;
        max-width: 12em;
        white-space: pre-wrap;
    }
    .box>.box-body>table>tbody>tr>td{
        min-width: 6em;
    }
}
  1. 全局添加(如果不需要全局添加直接第三步)
    在 app/Admin/bootstrap.php文件中添加
Admin::css('/static/css/scroll_bar.css');
  1. 单个页面添加添加
    进入相应页面添加
Admin::css('/static/css/scroll_bar.css');
本作品采用《CC 协议》,转载必须注明作者和本文链接
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 5

添加完滚动条后,列表操作列的最后一行的操作按钮弹窗在滚动条的下层,点击不到怎么办?

4年前 评论

@li_coco
使用以下代码可以完美解决:
$grid->fixColumns(4, -3);
第一个参数表示固定从头开始的前 4 列,第 2 个参数表示固定从后往前数的 3 列,(第二个参数可不传,默认为 - 1)

3年前 评论
薄荷蓝的晴天 3年前
wysheep 3年前

好像直接给 table > thead > th {white-space: nowrap;} 加这个属性,就可以出现滚动条了

1年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!