fix: CDataTable - fix table styles, support dark mode

Author: woothu

src/components/table/CDataTable.vue

@@ -7,7 +7,7 @@
       >
         <label class="mr-2">{{tableFilterData.label}}</label>
         <input
-          class="form-control table-filter"
+          class="form-control"
           type="text"
           :placeholder="tableFilterData.placeholder"
           @input="tableFilterChange($event.target.value, 'input')"
@@ -80,7 +80,7 @@
                 <slot :name="`${rawColumnNames[index]}-filter`">
                   <input
                     v-if="!fields || fields[index].filter !== false"
-                    class="w-100 table-filter"
+                    class="form-control form-control-sm"
                     @input="columnFilterEvent(colName, $event.target.value, 'input')"
                     @change="columnFilterEvent(colName, $event.target.value, 'change')"
                     :value="columnFilterState[colName]"
@@ -523,6 +523,10 @@ export default {
 </script>
 
 <style scoped>
+thead tr:not(:last-child) th {
+  border-bottom: 1px;
+}
+
 .transparent {
   opacity: 0.4;
 }

src/components/table/tests/__snapshots__/CDataTable.spec.js.snap

@@ -74,7 +74,7 @@ exports[`CDataTable renders correctly 2`] = `
       </label>
        
       <input
-        class="form-control table-filter"
+        class="form-control"
         placeholder="type string..."
         type="text"
       />
@@ -256,28 +256,28 @@ exports[`CDataTable renders correctly 2`] = `
             class="user-custom-class"
           >
             <input
-              class="w-100 table-filter"
+              class="form-control form-control-sm"
             />
           </th>
           <th
             class=""
           >
             <input
-              class="w-100 table-filter"
+              class="form-control form-control-sm"
             />
           </th>
           <th
             class=""
           >
             <input
-              class="w-100 table-filter"
+              class="form-control form-control-sm"
             />
           </th>
           <th
             class=""
           >
             <input
-              class="w-100 table-filter"
+              class="form-control form-control-sm"
             />
           </th>
           <th