tableCollapse

resources/assets/adminlte/scss/_main-sidebar.scss

@@ -17,17 +17,17 @@
 
   .nav .nav-item .nav-link {
     padding: 10px 10px 10px 15px!important;
-    margin-right: 0;
+    //margin-right: .5rem;
   }
 
   .nav-treeview.nav {
     .nav-item .nav-link {
       padding: 7px 10px 7px 15px!important;
-      margin-right: 0;
+      //margin-right: 0;
     }
 
     .nav-item .nav-link.active {
-      padding: 10px 10px 10px 15px!important;
+      padding: 8px 10px 8px 15px!important;
     }
   }
 }

resources/assets/dcat/sass/components/_custom-data-table.scss

@@ -1,5 +1,5 @@
 
-$table-border-radius: .4rem;
+$table-border-radius: .3rem;
 
 .custom-data-table-header .table-responsive .top {
   display: flex;

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

@@ -61,7 +61,7 @@
       border-bottom: 0;
       background: $white;
       box-shadow: $shadow;
-      border-radius: .35rem;
+      border-radius: $card-border-radius;
       margin: 7px 0;
     }
   }

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

@@ -171,3 +171,61 @@ table.table-bordered.dataTable.complex-headers {
 .table.default-table.table-bordered th, .table.default-table.table-bordered td {
   border: 1px solid #f0f4f8!important;
 }
+
+
+
+$table-border-color: #eff3f8;
+
+.table-collapse {
+  table.custom-data-table.dataTable tbody tr td:first-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  table.custom-data-table.dataTable tbody tr td:last-child{
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+body:not(.dark-mode) {
+  .table-collapse {
+    box-shadow: $shadow;
+    background: $white;
+    margin-top: 1rem;
+
+    table {
+      border-collapse:collapse!important;
+      margin-top: 0!important;
+    }
+
+    table.custom-data-table.dataTable thead th {
+      border-top: 1px solid $table-border-color;
+      border-bottom: 2px solid $table-border-color;
+      height: 24px;
+      vertical-align: middle;
+      background: $white;
+    }
+
+    table.custom-data-table.dataTable tbody td {
+      border-top: 1px solid $table-border-color;
+      height: 38px;
+    }
+
+    table.custom-data-table.dataTable tbody tr {
+      box-shadow: none;
+    }
+  }
+}
+
+body.dark-mode {
+  .table-collapse {
+    table {
+      border-spacing: 0 0.24rem;
+    }
+
+    table.custom-data-table.dataTable tbody td {
+      height: 38px;
+    }
+  }
+}

resources/assets/dcat/sass/dcat-app.scss

@@ -35,7 +35,7 @@ html body {
 // 滚动条
 @include scrollbar('body');
 @include scrollbar('.table-main');
-@include scrollbar('.table-responsive[data-pattern=priority-columns]');
+@include scrollbar('.table-responsive');
 @include scrollbar('.select2-container--default .select2-results>.select2-results__options');
 @include scrollbar('.layui-layer-page .layui-layer-content');
 @include scrollbar('.iconpicker .iconpicker-items');
@@ -114,5 +114,3 @@ li {
 
 // dark mode
 @import "./theme/dark";
-
-@import "./skins/2nd";

resources/assets/dcat/sass/skins/_2nd.scss

@@ -1,76 +0,0 @@
-
-$table-border-color: #eff3f8;
-
-
-body.dcat-2nd {
-  table.dataTable {
-    border-collapse:collapse!important;
-    margin-top: 0!important;
-  }
-
-  .custom-data-table.dcat-box {
-    background: $white;
-    box-shadow: $shadow;
-
-    .box-footer {
-      border-top: 1px solid $table-border-color;
-      padding-bottom: 10px!important;
-    }
-  }
-
-  .custom-data-table-header {
-    padding: 10px;
-
-    .btn {
-      background-color: transparent !important;
-      border-color: transparent !important;
-      box-shadow: none!important;
-      color: $dark80!important;
-      font-weight: bold;
-      //font-size: 14px;
-    }
-    .btn-group {
-      box-shadow: none!important;
-    }
-  }
-
-  table.custom-data-table.dataTable tbody tr td:first-child {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  table.custom-data-table.dataTable tbody tr td:last-child{
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  table.dataTable thead tr {
-    background: $white;
-  }
-
-  table.custom-data-table.dataTable thead th {
-    border-top: 1px solid #e3e7eb;
-    border-bottom: 1px solid #e3e7eb;
-    background: $dark30;
-  }
-
-  table.custom-data-table.dataTable tbody td {
-    border-top: 1px solid $table-border-color;
-    height: 38px;
-  }
-
-  table.custom-data-table.dataTable tbody tr {
-    box-shadow: none;
-  }
-
-  .custom-data-table-header .table-responsive .top .dataTables_filter .form-control {
-    box-shadow: none;
-    border-radius: 0;
-    border-bottom: 2px solid $input-border-color;
-  }
-}
-
-body.dcat-2nd.dark-mode {
-
-}
-

resources/views/grid/data-table.blade.php

@@ -7,7 +7,7 @@
 
     {!! $grid->renderHeader() !!}
 
-    <div class="table-responsive table-wrapper">
+    <div class="table-responsive table-wrapper {{ $grid->option('table_collapse') ? 'table-collapse' : '' }}">
             <table class="custom-data-table dataTable {{ $grid->formatTableClass() }}" id="{{ $tableId }}">
                 <thead>
                 @if ($headers = $grid->getComplexHeaders())

resources/views/grid/fixed-table.blade.php

@@ -5,7 +5,7 @@
 
     {!! $grid->renderHeader() !!}
 
-    <div class="table-responsive table-wrapper">
+    <div class="table-responsive table-wrapper {{ $grid->option('table_collapse') ? 'table-collapse' : '' }}">
         <div class="tables-container">
             <div class="table-wrap table-main" data-height="{{ $tableHeight }}">
                 <table class="custom-data-table dataTable {{ $grid->formatTableClass() }}" id="{{ $tableId }}">

src/Grid.php

@@ -174,6 +174,7 @@ class Grid
         'show_row_selector'      => true,
         'show_create_button'     => true,
         'show_bordered'          => false,
+        'table_collapse'         => false,
         'show_toolbar'           => true,
         'create_mode'            => self::CREATE_MODE_DEFAULT,
         'dialog_form_area'       => ['700px', '670px'],
@@ -583,6 +584,18 @@ class Grid
         return $this;
     }
 
+    /**
+     * @param bool $value
+     *
+     * @return $this
+     */
+    public function tableCollapse(bool $value = true)
+    {
+        $this->options['table_collapse'] = $value;
+
+        return $this;
+    }
+
     /**
      * Set grid header.
      *

src/Grid/Concerns/CanFixColumns.php

@@ -41,7 +41,9 @@ trait CanFixColumns
     protected function applyFixColumns()
     {
         if ($this->fixColumns) {
-            $this->withBorder();
+            if (! $this->options['show_bordered'] && ! $this->options['table_collapse']) {
+                $this->tableCollapse();
+            }
 
             $this->fixColumns->apply();
         }

src/Grid/FixColumns.php

@@ -292,6 +292,13 @@ JS;
 .tables-container .table.table-bordered.dataTable.complex-headers {
     margin-top: 0!important;
 }
+
+body.dark-mode .table-fixed-left .table {
+     padding: 0 0 0 1rem;
+}
+body.dark-mode .table-fixed-right .table {
+     padding: 0 1rem 0 0;
+}
 CSS;
 
         Admin::style($style);