update

update

resources/assets/dcat/sass/components/_card.scss

@@ -5,6 +5,6 @@
 .card.dcat-box {
   .card-header {
     border-bottom: 1px solid $divider-color;
-    padding-bottom: 1rem;
+    padding: 1.2rem;
   }
 }

resources/assets/dcat/sass/components/_grid-selector.scss

@@ -1,5 +1,6 @@
 .grid-selector {
-  margin: -1.5rem;
+  //margin: -1rem;
+  width: 100%;
 }
 .grid-selector .wrap {
   position: relative;
@@ -53,12 +54,14 @@
 
 .data-list-view {
   .grid-selector {
+    padding: 2px;
+
     .wrap {
       border-bottom: 0;
       background: $white;
       box-shadow: $shadow;
       border-radius: .4rem;
-      margin: 8px 0;
+      margin: 7px 0;
     }
   }
 }

resources/assets/dcat/sass/components/_table.scss

@@ -1,9 +1,15 @@
 .table {
   color: $font-color;
+  margin-bottom: 0;
 }
 
-table.dataTable thead th {
-  font-size: .95rem;
+table.dataTable thead tr {
+  background: transparent;
+}
+
+.table th {
+  padding: .9rem;
+  text-transform: capitalize;
 }
 
 // data-list-view 表格
@@ -18,9 +24,9 @@ table.data-list-view.dataTable thead th, table.data-thumb-view.dataTable thead t
   padding: 0.714rem 1.4rem;
 }
 
-table.dataTable thead tr {
-  background: transparent;
+table.dataTable thead tr th {
   text-transform: uppercase;
+  font-size: .95rem;
 }
 
 table.dataTable {
@@ -35,12 +41,16 @@ table.data-list-view.dataTable tbody tr:hover, table.data-thumb-view.dataTable t
   transform: none;
   background: #fafafa;
 }
-table.data-list-view.dataTable tbody td, table.data-thumb-view.dataTable tbody td {
+table.data-list-view.dataTable tbody td, table.data-thumb-view.dataTable tbody td,  .table td {
   padding: .6rem;
-  height: 50px;
+  height: 51px;
   line-height: 1.42857;
 }
 
+.table tr td:first-child, .table tr th:first-child {
+  padding-left: 1.4rem;
+}
+
 // 快捷搜索
 .data-list-view-header .table-responsive .top .dataTables_filter .form-control, .data-thumb-view-header .table-responsive .top .dataTables_filter .form-control {
   padding: 1.23rem 2.8rem !important;
@@ -49,6 +59,10 @@ table.data-list-view.dataTable tbody td, table.data-thumb-view.dataTable tbody t
   box-shadow: $shadow;
 }
 
+.card-header.data-list-view-header .table-responsive .top .dataTables_filter .form-control {
+  box-shadow: $shadow-100;
+}
+
 .data-list-view-header .table-responsive .top .dataTables_filter label:after, .data-thumb-view-header .table-responsive .top .dataTables_filter label:after {
   top: 0.58rem;
   font-size: 1rem;

resources/dist/dcat/css/dcat-app.css

@@ -1961,10 +1961,16 @@ select.form-control:not([multiple=multiple]) {
 
 .table {
   color: #414750;
+  margin-bottom: 0;
 }
 
-table.dataTable thead th {
-  font-size: 0.95rem;
+table.dataTable thead tr {
+  background: transparent;
+}
+
+.table th {
+  padding: 0.9rem;
+  text-transform: capitalize;
 }
 
 table.data-list-view.dataTable tbody tr,
@@ -1982,9 +1988,9 @@ table.data-thumb-view.dataTable thead th {
   padding: 0.714rem 1.4rem;
 }
 
-table.dataTable thead tr {
-  background: transparent;
+table.dataTable thead tr th {
   text-transform: uppercase;
+  font-size: 0.95rem;
 }
 
 table.dataTable {
@@ -2004,12 +2010,18 @@ table.data-thumb-view.dataTable tbody tr:hover {
 }
 
 table.data-list-view.dataTable tbody td,
-table.data-thumb-view.dataTable tbody td {
+table.data-thumb-view.dataTable tbody td,
+.table td {
   padding: 0.6rem;
-  height: 50px;
+  height: 51px;
   line-height: 1.42857;
 }
 
+.table tr td:first-child,
+.table tr th:first-child {
+  padding-left: 1.4rem;
+}
+
 .data-list-view-header .table-responsive .top .dataTables_filter .form-control,
 .data-thumb-view-header .table-responsive .top .dataTables_filter .form-control {
   padding: 1.23rem 2.8rem !important;
@@ -2018,6 +2030,10 @@ table.data-thumb-view.dataTable tbody td {
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
 }
 
+.card-header.data-list-view-header .table-responsive .top .dataTables_filter .form-control {
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 5px 1px rgba(0, 0, 0, 0.05);
+}
+
 .data-list-view-header .table-responsive .top .dataTables_filter label:after,
 .data-thumb-view-header .table-responsive .top .dataTables_filter label:after {
   top: 0.58rem;
@@ -2159,7 +2175,7 @@ table.data-thumb-view.dataTable tbody td {
 
 .card.dcat-box .card-header {
   border-bottom: 1px solid #f4f4f4;
-  padding-bottom: 1rem;
+  padding: 1.2rem;
 }
 
 .dd {
@@ -2273,7 +2289,7 @@ table.data-thumb-view.dataTable tbody td {
 }
 
 .grid-selector {
-  margin: -1.5rem;
+  width: 100%;
 }
 
 .grid-selector .wrap {
@@ -2337,12 +2353,16 @@ table.data-thumb-view.dataTable tbody td {
   visibility: visible;
 }
 
+.data-list-view .grid-selector {
+  padding: 2px;
+}
+
 .data-list-view .grid-selector .wrap {
   border-bottom: 0;
   background: #fff;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
   border-radius: 0.4rem;
-  margin: 8px 0;
+  margin: 7px 0;
 }
 
 body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li > a > i:before {

resources/views/grid/table.blade.php

@@ -1,27 +1,31 @@
-{!! $grid->renderQuickSearch() !!}
 
-<div class="card dcat-box">
+<div class="card dcat-box dt-bootstrap4">
 
     @if ($grid->allowToolbar())
-        <div class="box-header">
-            @if(!empty($title))
-                <h4 class="pull-left" style="margin:5px 10px 0;">
-                    {!! $title !!}&nbsp;
-                    @if(!empty($description))
-                        <small>{!! $description!!}</small>
+        <div class="data-list-view-header card-header">
+            <div class="table-responsive">
+                <div class="top" style="padding: 0;margin: 0">
+                    @if(!empty($title))
+                        <h4 style="margin:5px 10px 0;">
+                            {!! $title !!}&nbsp;
+                            @if(!empty($description))
+                                <small>{!! $description!!}</small>
+                            @endif
+                        </h4>
+                        <div data-responsive-table-toolbar="{{$tableId}}">
+                            {!! $grid->renderTools() !!} {!! $grid->renderCreateButton() !!} {!! $grid->renderExportButton() !!}
+                        </div>
+                    @else
+                        <div>
+                            {!! $grid->renderTools() !!}
+                        </div>
+
+                        <div data-responsive-table-toolbar="{{$tableId}}">
+                            {!! $grid->renderCreateButton() !!} {!! $grid->renderExportButton() !!}
+                        </div>
                     @endif
-                </h4>
-                <div class="pull-right" data-responsive-table-toolbar="{{$tableId}}">
-                    {!! $grid->renderTools() !!} {!! $grid->renderCreateButton() !!} {!! $grid->renderExportButton() !!}
-                </div>
-            @else
-                <div class="pull-right" data-responsive-table-toolbar="{{$tableId}}">
-                    {!! $grid->renderCreateButton() !!} {!! $grid->renderExportButton() !!}
                 </div>
-
-                {!! $grid->renderTools() !!}
-            @endif
-
+            </div>
         </div>
     @endif
 
@@ -29,8 +33,8 @@
 
     {!! $grid->renderHeader() !!}
 
-    <div class="card-body panel-collapse collapse in table-responsive" {!! $grid->option('show_bordered') ? 'style="padding:3px 10px 10px"' : '' !!}>
-        <table class=" table table-hover responsive {{ $grid->option('show_bordered') ? 'table-bordered' : $grid->option('table_header_style') }} " id="{{$tableId}}">
+    <div class="table-responsive" style="{!! $grid->option('show_bordered') ? 'padding:3px 10px 10px' : '' !!};border-bottom: 1px solid #f8f8f8!important;">
+        <table class="table dt-checkboxes-select {{ $grid->option('show_bordered') ? 'table-bordered' : $grid->option('table_header_style') }} " id="{{ $tableId }}">
             <thead>
             @if ($headers = $grid->getComplexHeaders())
                 <tr>
@@ -74,11 +78,11 @@
     {!! $grid->renderFooter() !!}
 
     @if ($paginator = $grid->paginator())
-        <div class="box-footer clearfix " style="padding-bottom:5px;">
+        <div class="box-footer clearfix mt-1" style="padding:0 1rem;">
             {!! $paginator->render() !!}
         </div>
     @else
-        <div class="box-footer clearfix text-80 " style="height:48px;line-height:25px;">
+        <div class="box-footer clearfix  mt-1 " style="height:48px;line-height:25px;">
             @if ($grid->rows()->isEmpty())
                 {!! trans('admin.pagination.range', ['first' => '<b>0</b>', 'last' => '<b>'.$grid->rows()->count().'</b>', 'total' => '<b>'.$grid->rows()->count().'</b>',]) !!}
             @else

resources/views/grid/table2.blade.php

@@ -33,7 +33,7 @@
 
     {!! $grid->renderHeader() !!}
 
-    <div class="in table-responsive" {!! $grid->option('show_bordered') ? 'style="padding:3px 10px 10px"' : '' !!}>
+    <div class="in table-responsive" style="{!! $grid->option('show_bordered') ? 'padding:3px 10px 10px' : '' !!}">
         <table class="table data-list-view dataTable dt-checkboxes-select {{ $grid->option('show_bordered') ? 'table-bordered' : $grid->option('table_header_style') }} " id="{{ $tableId }}">
             <thead>
             @if ($headers = $grid->getComplexHeaders())

src/Grid.php

@@ -568,7 +568,7 @@ class Grid
         }
 
         return <<<HTML
-<div class="card-header clearfix" style="border-bottom: 0;background: transparent">{$content}</div>
+<div class="card-header clearfix" style="border-bottom: 0;background: transparent;padding: 0">{$content}</div>
 HTML;
     }