diff --git a/demo/documentation/components/dataTable/enUS/index.md b/demo/documentation/components/dataTable/enUS/index.md
index 497492da2..7d6d15fdc 100644
--- a/demo/documentation/components/dataTable/enUS/index.md
+++ b/demo/documentation/components/dataTable/enUS/index.md
@@ -32,6 +32,7 @@ ajaxUsage
 ## Props
 |Name|Type|Default|Description|
 |-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
 |data|`Array<object>`|`[]`|Data to display|
 |columns|`Array<Column>`||Columns to display, **required**|
 |max-height|`number \| string`|`null`|The max-height of the table. If content height is larger than it, the header will be fixed at top|
diff --git a/demo/documentation/components/dataTable/zhCN/index.md b/demo/documentation/components/dataTable/zhCN/index.md
index e0bb58ccf..6dad4d095 100644
--- a/demo/documentation/components/dataTable/zhCN/index.md
+++ b/demo/documentation/components/dataTable/zhCN/index.md
@@ -32,6 +32,7 @@ ajaxUsage
 ## Props
 |名称|类型|默认值|说明|
 |-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
 |data|`Array<object>`|`[]`|需要展示的数据|
 |columns|`Array<Column>`||需要展示的列，**必需**|
 |max-height|`number \| string`|`null`|表格的最大高度，如果内容高度高于它，那么表头将固定|
diff --git a/demo/documentation/components/table/enUS/index.md b/demo/documentation/components/table/enUS/index.md
index 341b3fc0d..204af027a 100644
--- a/demo/documentation/components/table/enUS/index.md
+++ b/demo/documentation/components/table/enUS/index.md
@@ -18,6 +18,7 @@ You can use `n-table`, `n-thead`, `n-tbody`, `n-tr`, `n-th` and `n-td`.
 ### Table Props
 |Name|Type|Default|Description|
 |-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
 |bordered|`boolean`|`true`||
 |single-line|`boolean`|`true`||
 |single-column|`boolean`|`false`||
diff --git a/demo/documentation/components/table/enUS/size.md b/demo/documentation/components/table/enUS/size.md
index d72c87311..5b5211591 100644
--- a/demo/documentation/components/table/enUS/size.md
+++ b/demo/documentation/components/table/enUS/size.md
@@ -1,6 +1,6 @@
-# 尺寸
+# Size
 ```html
-<<n-table :bordered="false" :single-line="false" size="small">
+<n-table :bordered="false" :single-line="false" size="small">
   <n-thead>
     <n-tr>
       <n-th>Abandon</n-th>
diff --git a/demo/documentation/components/table/zhCN/index.md b/demo/documentation/components/table/zhCN/index.md
index 8a78eaa64..6ec7fa088 100644
--- a/demo/documentation/components/table/zhCN/index.md
+++ b/demo/documentation/components/table/zhCN/index.md
@@ -18,6 +18,7 @@ single-line
 ### Table Props
 |名称|类型|默认值|说明|
 |-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
 |bordered|`boolean`|`true`||
 |single-line|`boolean`|`true`||
 |single-column|`boolean`|`false`||
diff --git a/demo/utils/EditOnGithubHeader.vue b/demo/utils/EditOnGithubHeader.vue
index 49023859c..cee9737e4 100644
--- a/demo/utils/EditOnGithubHeader.vue
+++ b/demo/utils/EditOnGithubHeader.vue
@@ -60,10 +60,11 @@ export default {
   display: inline-flex;
   align-items: center;
   opacity: 0;
-  transition: opacity .3s cubic-bezier(.4, 0, .2, 1);
+  transition: opacity .3s .15s ease-in;
 }
 
 .naive-doc-title:hover .edit-button {
   opacity: 1;
+  transition: opacity .3s ease-out;
 }
 </style>
diff --git a/src/DataTable/src/DataTable.vue b/src/DataTable/src/DataTable.vue
index 4376baa1d..98fefdbc0 100644
--- a/src/DataTable/src/DataTable.vue
+++ b/src/DataTable/src/DataTable.vue
@@ -9,7 +9,10 @@
       [`n-data-table--${size}-size`]: true
     }"
   >
-    <n-spin :spinning="loading">
+    <n-spin
+      :spinning="loading"
+      :theme="syntheticTheme"
+    >
       <div
         class="n-data-table-wrapper"
       >
@@ -34,7 +37,7 @@
           }"
           :style="bodyStyle"
         >
-          <n-empty />
+          <n-empty :theme="syntheticTheme" />
         </div>
       </div>
       <div
@@ -42,6 +45,7 @@
         class="n-data-table__pagination"
       >
         <n-pagination
+          :theme="syntheticTheme"
           :page="syntheticPagination.page"
           :page-count="syntheticPagination.pageCount"
           :page-slot="pagination.pageSlot"
diff --git a/src/DataTable/src/HeaderButton/FilterButton.vue b/src/DataTable/src/HeaderButton/FilterButton.vue
index 9fdc36244..f703e3015 100644
--- a/src/DataTable/src/HeaderButton/FilterButton.vue
+++ b/src/DataTable/src/HeaderButton/FilterButton.vue
@@ -8,7 +8,9 @@
   >
     <n-popover
       trigger="click"
+      :theme="NDataTable.syntheticTheme"
       :controller="controller"
+      :overlay-style="{ padding: 0 }"
       @show="popoverVisible = true"
       @hide="popoverVisible = false"
     >
diff --git a/src/DataTable/src/HeaderButton/FilterMenu.vue b/src/DataTable/src/HeaderButton/FilterMenu.vue
index 7ad58201c..eef64c0d3 100644
--- a/src/DataTable/src/HeaderButton/FilterMenu.vue
+++ b/src/DataTable/src/HeaderButton/FilterMenu.vue
@@ -2,6 +2,7 @@
   <div class="n-data-table-filter-menu">
     <n-checkbox-group
       v-if="multiple"
+      :theme="theme"
       :value="cachedValue"
       class="n-data-table-filter-menu__group"
       @change="handleChange"
@@ -16,6 +17,7 @@
     </n-checkbox-group>
     <n-radio-group
       v-else
+      :theme="theme"
       :name="radioGroupName"
       class="n-data-table-filter-menu__group"
       :value="cachedValue && cachedValue[0]"
@@ -29,12 +31,23 @@
         {{ option.label }}
       </n-radio>
     </n-radio-group>
-    <n-divider />
+    <n-divider :theme="theme" />
     <div class="n-data-table-filter-menu__action">
-      <n-button size="tiny" round @click="handleCancelClick">
+      <n-button
+        size="tiny"
+        round
+        :theme="theme"
+        @click="handleCancelClick"
+      >
         {{ NDataTable.localeNamespace.clear }}
       </n-button>
-      <n-button type="primary" size="tiny" round @click="handleConfirmClick">
+      <n-button
+        :theme="theme"
+        type="primary"
+        size="tiny"
+        round
+        @click="handleConfirmClick"
+      >
         {{ NDataTable.localeNamespace.confirm }}
       </n-button>
     </div>
@@ -97,6 +110,11 @@ export default {
       cachedValue: this.value
     }
   },
+  computed: {
+    theme () {
+      return this.NDataTable.syntheticTheme
+    }
+  },
   methods: {
     handleChange (value) {
       if (this.multiple) {
diff --git a/src/DataTable/src/TableParts/Body.vue b/src/DataTable/src/TableParts/Body.vue
index df2f5de19..5ea93aad7 100644
--- a/src/DataTable/src/TableParts/Body.vue
+++ b/src/DataTable/src/TableParts/Body.vue
@@ -2,6 +2,7 @@
   <n-scrollbar
     ref="scrollbar"
     class="n-data-table-base-table-body"
+    :theme="NDataTable.syntheticTheme"
     :style="style"
     :content-style="{
       minWidth: scrollX
diff --git a/styles/DataTable.scss b/styles/DataTable.scss
index 6b9891f14..e5803b5b7 100644
--- a/styles/DataTable.scss
+++ b/styles/DataTable.scss
@@ -94,6 +94,16 @@
           box-sizing: border-box;
           transition: background-color 0.3s $--n-ease-in-out-cubic-bezier;
           background-clip: padding-box;
+          &:last-child {
+            @include b(data-table-td) {
+              &::after {
+                bottom: 0 !important;
+              }
+              &::before {
+                bottom: 0 !important;
+              }
+            }
+          }
         }
       }
       @include b(data-table-td) {
@@ -238,8 +248,16 @@
     @include m(single-column) {
       @include b(data-table-wrapper) {
         @include b(data-table-table){
-          @include b(data-table-td) {
-            border-bottom: 0px solid map-get($--data-table-border-color, 'default') !important;
+          @include b(data-table-tr) {
+            @include b(data-table-td) {
+              border-bottom: 0px solid map-get($--data-table-border-color, 'default') !important;
+              &::after {
+                bottom: 0 !important;
+              }
+              &::before {
+                bottom: 0 !important;
+              }
+            }
           }
         }
       }