Laravel-admin 表格新增滾動條

hengbo_liu發表於2019-08-23
Laravel

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 協議》，轉載必須註明作者和本文連結

相關文章