From aebb7810007bc168c80073422a6e797e8ec2e112 Mon Sep 17 00:00:00 2001
From: zombieJ <smith3816@gmail.com>
Date: Sun, 31 Mar 2019 14:01:24 +0800
Subject: [PATCH] Table style update. Move sort button after title (#15758)

* update style of sort icon

* update snapshot

* micro adjust

* little offset of arrow
---
 .../__snapshots__/components.test.js.snap     |  252 ++-
 .../__tests__/__snapshots__/demo.test.js.snap |   18 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   18 +-
 .../__snapshots__/index.test.js.snap          |  792 ++++++-
 components/table/Table.tsx                    |   15 +-
 .../__snapshots__/Table.filter.test.js.snap   |    9 +-
 .../Table.pagination.test.js.snap             |   18 +-
 .../Table.rowSelection.test.js.snap           |   83 +-
 .../__snapshots__/Table.sorter.test.js.snap   |   84 +-
 .../__snapshots__/Table.test.js.snap          |   36 +-
 .../__tests__/__snapshots__/demo.test.js.snap | 1914 ++++++++++++-----
 .../__snapshots__/empty.test.js.snap          |  342 ++-
 components/table/style/index.less             |   68 +-
 13 files changed, 2802 insertions(+), 847 deletions(-)

diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
index 7a4a2e2497..cc1740a684 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -11420,48 +11420,56 @@ exports[`ConfigProvider components Table configProvider 1`] = `
                     <div
                       class="config-table-column-sorters"
                     >
-                      Name
-                      <div
-                        class="config-table-column-sorter"
-                        title="Sort"
+                      <span
+                        class="config-table-column-title"
                       >
-                        <i
-                          aria-label="icon: caret-up"
-                          class="anticon anticon-caret-up config-table-column-sorter-up off"
+                        Name
+                      </span>
+                      <span
+                        class="config-table-column-sorter"
+                      >
+                        <div
+                          class="config-table-column-sorter-inner config-table-column-sorter-inner-full"
+                          title="Sort"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class=""
-                            data-icon="caret-up"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 1024 1024"
-                            width="1em"
+                          <i
+                            aria-label="icon: caret-up"
+                            class="anticon anticon-caret-up config-table-column-sorter-up off"
                           >
-                            <path
-                              d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
-                            />
-                          </svg>
-                        </i>
-                        <i
-                          aria-label="icon: caret-down"
-                          class="anticon anticon-caret-down config-table-column-sorter-down off"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class=""
-                            data-icon="caret-down"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 1024 1024"
-                            width="1em"
+                            <svg
+                              aria-hidden="true"
+                              class=""
+                              data-icon="caret-up"
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 1024 1024"
+                              width="1em"
+                            >
+                              <path
+                                d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
+                              />
+                            </svg>
+                          </i>
+                          <i
+                            aria-label="icon: caret-down"
+                            class="anticon anticon-caret-down config-table-column-sorter-down off"
                           >
-                            <path
-                              d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
-                            />
-                          </svg>
-                        </i>
-                      </div>
+                            <svg
+                              aria-hidden="true"
+                              class=""
+                              data-icon="caret-down"
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 1024 1024"
+                              width="1em"
+                            >
+                              <path
+                                d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                              />
+                            </svg>
+                          </i>
+                        </div>
+                      </span>
                     </div>
                     <i
                       aria-label="icon: filter"
@@ -11623,48 +11631,56 @@ exports[`ConfigProvider components Table normal 1`] = `
                     <div
                       class="ant-table-column-sorters"
                     >
-                      Name
-                      <div
-                        class="ant-table-column-sorter"
-                        title="Sort"
+                      <span
+                        class="ant-table-column-title"
                       >
-                        <i
-                          aria-label="icon: caret-up"
-                          class="anticon anticon-caret-up ant-table-column-sorter-up off"
+                        Name
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      >
+                        <div
+                          class="ant-table-column-sorter-inner ant-table-column-sorter-inner-full"
+                          title="Sort"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class=""
-                            data-icon="caret-up"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 1024 1024"
-                            width="1em"
+                          <i
+                            aria-label="icon: caret-up"
+                            class="anticon anticon-caret-up ant-table-column-sorter-up off"
                           >
-                            <path
-                              d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
-                            />
-                          </svg>
-                        </i>
-                        <i
-                          aria-label="icon: caret-down"
-                          class="anticon anticon-caret-down ant-table-column-sorter-down off"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class=""
-                            data-icon="caret-down"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 1024 1024"
-                            width="1em"
+                            <svg
+                              aria-hidden="true"
+                              class=""
+                              data-icon="caret-up"
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 1024 1024"
+                              width="1em"
+                            >
+                              <path
+                                d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
+                              />
+                            </svg>
+                          </i>
+                          <i
+                            aria-label="icon: caret-down"
+                            class="anticon anticon-caret-down ant-table-column-sorter-down off"
                           >
-                            <path
-                              d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
-                            />
-                          </svg>
-                        </i>
-                      </div>
+                            <svg
+                              aria-hidden="true"
+                              class=""
+                              data-icon="caret-down"
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 1024 1024"
+                              width="1em"
+                            >
+                              <path
+                                d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                              />
+                            </svg>
+                          </i>
+                        </div>
+                      </span>
                     </div>
                     <i
                       aria-label="icon: filter"
@@ -11826,48 +11842,56 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
                     <div
                       class="prefix-Table-column-sorters"
                     >
-                      Name
-                      <div
-                        class="prefix-Table-column-sorter"
-                        title="Sort"
+                      <span
+                        class="prefix-Table-column-title"
                       >
-                        <i
-                          aria-label="icon: caret-up"
-                          class="anticon anticon-caret-up prefix-Table-column-sorter-up off"
+                        Name
+                      </span>
+                      <span
+                        class="prefix-Table-column-sorter"
+                      >
+                        <div
+                          class="prefix-Table-column-sorter-inner prefix-Table-column-sorter-inner-full"
+                          title="Sort"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class=""
-                            data-icon="caret-up"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 1024 1024"
-                            width="1em"
+                          <i
+                            aria-label="icon: caret-up"
+                            class="anticon anticon-caret-up prefix-Table-column-sorter-up off"
                           >
-                            <path
-                              d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
-                            />
-                          </svg>
-                        </i>
-                        <i
-                          aria-label="icon: caret-down"
-                          class="anticon anticon-caret-down prefix-Table-column-sorter-down off"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class=""
-                            data-icon="caret-down"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 1024 1024"
-                            width="1em"
+                            <svg
+                              aria-hidden="true"
+                              class=""
+                              data-icon="caret-up"
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 1024 1024"
+                              width="1em"
+                            >
+                              <path
+                                d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
+                              />
+                            </svg>
+                          </i>
+                          <i
+                            aria-label="icon: caret-down"
+                            class="anticon anticon-caret-down prefix-Table-column-sorter-down off"
                           >
-                            <path
-                              d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
-                            />
-                          </svg>
-                        </i>
-                      </div>
+                            <svg
+                              aria-hidden="true"
+                              class=""
+                              data-icon="caret-down"
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 1024 1024"
+                              width="1em"
+                            >
+                              <path
+                                d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                              />
+                            </svg>
+                          </i>
+                        </div>
+                      </span>
                     </div>
                     <i
                       aria-label="icon: filter"
diff --git a/components/empty/__tests__/__snapshots__/demo.test.js.snap b/components/empty/__tests__/__snapshots__/demo.test.js.snap
index 6ee0916d69..215d77e779 100644
--- a/components/empty/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/empty/__tests__/__snapshots__/demo.test.js.snap
@@ -381,14 +381,28 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
                         class=""
                       >
                         <div>
-                          Name
+                          <span
+                            class="ant-table-column-title"
+                          >
+                            Name
+                          </span>
+                          <span
+                            class="ant-table-column-sorter"
+                          />
                         </div>
                       </th>
                       <th
                         class=""
                       >
                         <div>
-                          Age
+                          <span
+                            class="ant-table-column-title"
+                          >
+                            Age
+                          </span>
+                          <span
+                            class="ant-table-column-sorter"
+                          />
                         </div>
                       </th>
                     </tr>
diff --git a/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap b/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap
index a1c5de08ae..28b3f50426 100644
--- a/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap
@@ -1757,7 +1757,14 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
                           class="ant-table-column-has-actions ant-table-column-has-filters"
                         >
                           <div>
-                            Name
+                            <span
+                              class="ant-table-column-title"
+                            >
+                              Name
+                            </span>
+                            <span
+                              class="ant-table-column-sorter"
+                            />
                           </div>
                           <i
                             aria-label="icon: filter"
@@ -1784,7 +1791,14 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
                           class=""
                         >
                           <div>
-                            Age
+                            <span
+                              class="ant-table-column-title"
+                            >
+                              Age
+                            </span>
+                            <span
+                              class="ant-table-column-sorter"
+                            />
                           </div>
                         </th>
                       </tr>
diff --git a/components/locale-provider/__tests__/__snapshots__/index.test.js.snap b/components/locale-provider/__tests__/__snapshots__/index.test.js.snap
index d1415fbe06..ab12e03a6e 100644
--- a/components/locale-provider/__tests__/__snapshots__/index.test.js.snap
+++ b/components/locale-provider/__tests__/__snapshots__/index.test.js.snap
@@ -7391,7 +7391,14 @@ exports[`Locale Provider should display the text as ar 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -7418,7 +7425,14 @@ exports[`Locale Provider should display the text as ar 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -12458,7 +12472,14 @@ exports[`Locale Provider should display the text as bg 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -12485,7 +12506,14 @@ exports[`Locale Provider should display the text as bg 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -17525,7 +17553,14 @@ exports[`Locale Provider should display the text as ca 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -17552,7 +17587,14 @@ exports[`Locale Provider should display the text as ca 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -22592,7 +22634,14 @@ exports[`Locale Provider should display the text as cs 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -22619,7 +22668,14 @@ exports[`Locale Provider should display the text as cs 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -27659,7 +27715,14 @@ exports[`Locale Provider should display the text as da 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -27686,7 +27749,14 @@ exports[`Locale Provider should display the text as da 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -32726,7 +32796,14 @@ exports[`Locale Provider should display the text as de 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -32753,7 +32830,14 @@ exports[`Locale Provider should display the text as de 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -37793,7 +37877,14 @@ exports[`Locale Provider should display the text as el 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -37820,7 +37911,14 @@ exports[`Locale Provider should display the text as el 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -42860,7 +42958,14 @@ exports[`Locale Provider should display the text as en 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -42887,7 +42992,14 @@ exports[`Locale Provider should display the text as en 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -47927,7 +48039,14 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -47954,7 +48073,14 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -52994,7 +53120,14 @@ exports[`Locale Provider should display the text as es 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -53021,7 +53154,14 @@ exports[`Locale Provider should display the text as es 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -58061,7 +58201,14 @@ exports[`Locale Provider should display the text as et 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -58088,7 +58235,14 @@ exports[`Locale Provider should display the text as et 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -63128,7 +63282,14 @@ exports[`Locale Provider should display the text as fa 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -63155,7 +63316,14 @@ exports[`Locale Provider should display the text as fa 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -68195,7 +68363,14 @@ exports[`Locale Provider should display the text as fi 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -68222,7 +68397,14 @@ exports[`Locale Provider should display the text as fi 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -73262,7 +73444,14 @@ exports[`Locale Provider should display the text as fr 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -73289,7 +73478,14 @@ exports[`Locale Provider should display the text as fr 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -78329,7 +78525,14 @@ exports[`Locale Provider should display the text as fr 2`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -78356,7 +78559,14 @@ exports[`Locale Provider should display the text as fr 2`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -83396,7 +83606,14 @@ exports[`Locale Provider should display the text as he 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -83423,7 +83640,14 @@ exports[`Locale Provider should display the text as he 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -88463,7 +88687,14 @@ exports[`Locale Provider should display the text as hi 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -88490,7 +88721,14 @@ exports[`Locale Provider should display the text as hi 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -93530,7 +93768,14 @@ exports[`Locale Provider should display the text as hu 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -93557,7 +93802,14 @@ exports[`Locale Provider should display the text as hu 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -98597,7 +98849,14 @@ exports[`Locale Provider should display the text as id 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -98624,7 +98883,14 @@ exports[`Locale Provider should display the text as id 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -103664,7 +103930,14 @@ exports[`Locale Provider should display the text as is 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -103691,7 +103964,14 @@ exports[`Locale Provider should display the text as is 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -108731,7 +109011,14 @@ exports[`Locale Provider should display the text as it 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -108758,7 +109045,14 @@ exports[`Locale Provider should display the text as it 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -113798,7 +114092,14 @@ exports[`Locale Provider should display the text as ja 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -113825,7 +114126,14 @@ exports[`Locale Provider should display the text as ja 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -118865,7 +119173,14 @@ exports[`Locale Provider should display the text as kn 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -118892,7 +119207,14 @@ exports[`Locale Provider should display the text as kn 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -123932,7 +124254,14 @@ exports[`Locale Provider should display the text as ko 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -123959,7 +124288,14 @@ exports[`Locale Provider should display the text as ko 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -128999,7 +129335,14 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -129026,7 +129369,14 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -134066,7 +134416,14 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -134093,7 +134450,14 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -139133,7 +139497,14 @@ exports[`Locale Provider should display the text as nb 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -139160,7 +139531,14 @@ exports[`Locale Provider should display the text as nb 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -144200,7 +144578,14 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -144227,7 +144612,14 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -149267,7 +149659,14 @@ exports[`Locale Provider should display the text as nl 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -149294,7 +149693,14 @@ exports[`Locale Provider should display the text as nl 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -154334,7 +154740,14 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -154361,7 +154774,14 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -159401,7 +159821,14 @@ exports[`Locale Provider should display the text as pl 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -159428,7 +159855,14 @@ exports[`Locale Provider should display the text as pl 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -164468,7 +164902,14 @@ exports[`Locale Provider should display the text as pt 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -164495,7 +164936,14 @@ exports[`Locale Provider should display the text as pt 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -169535,7 +169983,14 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -169562,7 +170017,14 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -174602,7 +175064,14 @@ exports[`Locale Provider should display the text as ru 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -174629,7 +175098,14 @@ exports[`Locale Provider should display the text as ru 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -179669,7 +180145,14 @@ exports[`Locale Provider should display the text as sk 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -179696,7 +180179,14 @@ exports[`Locale Provider should display the text as sk 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -184736,7 +185226,14 @@ exports[`Locale Provider should display the text as sl 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -184763,7 +185260,14 @@ exports[`Locale Provider should display the text as sl 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -189803,7 +190307,14 @@ exports[`Locale Provider should display the text as sr 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -189830,7 +190341,14 @@ exports[`Locale Provider should display the text as sr 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -194870,7 +195388,14 @@ exports[`Locale Provider should display the text as sv 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -194897,7 +195422,14 @@ exports[`Locale Provider should display the text as sv 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -199937,7 +200469,14 @@ exports[`Locale Provider should display the text as th 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -199964,7 +200503,14 @@ exports[`Locale Provider should display the text as th 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -205004,7 +205550,14 @@ exports[`Locale Provider should display the text as tr 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -205031,7 +205584,14 @@ exports[`Locale Provider should display the text as tr 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -210071,7 +210631,14 @@ exports[`Locale Provider should display the text as uk 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -210098,7 +210665,14 @@ exports[`Locale Provider should display the text as uk 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -215138,7 +215712,14 @@ exports[`Locale Provider should display the text as vi 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -215165,7 +215746,14 @@ exports[`Locale Provider should display the text as vi 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -220205,7 +220793,14 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="图标: filter"
@@ -220232,7 +220827,14 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -225272,7 +225874,14 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
                       class="ant-table-column-has-actions ant-table-column-has-filters"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -225299,7 +225908,14 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
diff --git a/components/table/Table.tsx b/components/table/Table.tsx
index 11d62e9845..f5ed8f3d19 100755
--- a/components/table/Table.tsx
+++ b/components/table/Table.tsx
@@ -884,7 +884,14 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
         );
 
         sortButton = (
-          <div title={locale.sortTitle} className={`${prefixCls}-column-sorter`} key="sorter">
+          <div
+            title={locale.sortTitle}
+            className={classNames(
+              `${prefixCls}-column-sorter-inner`,
+              ascend && descend && `${prefixCls}-column-sorter-inner-full`,
+            )}
+            key="sorter"
+          >
             {ascend}
             {descend}
           </div>
@@ -919,8 +926,10 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
         }),
         title: [
           <div key="title" className={sortButton ? `${prefixCls}-column-sorters` : undefined}>
-            {this.renderColumnTitle(column.title)}
-            {sortButton}
+            <span className={`${prefixCls}-column-title`}>
+              {this.renderColumnTitle(column.title)}
+            </span>
+            <span className={`${prefixCls}-column-sorter`}>{sortButton}</span>
           </div>,
           filterDropdown,
         ],
diff --git a/components/table/__tests__/__snapshots__/Table.filter.test.js.snap b/components/table/__tests__/__snapshots__/Table.filter.test.js.snap
index 9f1632f780..4e87f6d5f2 100644
--- a/components/table/__tests__/__snapshots__/Table.filter.test.js.snap
+++ b/components/table/__tests__/__snapshots__/Table.filter.test.js.snap
@@ -97,7 +97,14 @@ exports[`Table.filter renders filter correctly 1`] = `
                     class="ant-table-column-has-actions ant-table-column-has-filters"
                   >
                     <div>
-                      Name
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Name
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                     <i
                       aria-label="icon: filter"
diff --git a/components/table/__tests__/__snapshots__/Table.pagination.test.js.snap b/components/table/__tests__/__snapshots__/Table.pagination.test.js.snap
index 3b00741386..b163bac306 100644
--- a/components/table/__tests__/__snapshots__/Table.pagination.test.js.snap
+++ b/components/table/__tests__/__snapshots__/Table.pagination.test.js.snap
@@ -33,7 +33,14 @@ exports[`Table.pagination Accepts pagination as true 1`] = `
                     class=""
                   >
                     <div>
-                      Name
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Name
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                 </tr>
@@ -210,7 +217,14 @@ exports[`Table.pagination renders pagination correctly 1`] = `
                     class=""
                   >
                     <div>
-                      Name
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Name
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                 </tr>
diff --git a/components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap b/components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
index b3a5fe8e1a..2aab8ebcc3 100644
--- a/components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
+++ b/components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
@@ -39,32 +39,46 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
                       class="ant-table-fixed-columns-in-body ant-table-selection-column"
                     >
                       <div>
-                        <div
-                          class="ant-table-selection"
+                        <span
+                          class="ant-table-column-title"
                         >
-                          <label
-                            class="ant-checkbox-wrapper"
+                          <div
+                            class="ant-table-selection"
                           >
-                            <span
-                              class="ant-checkbox"
+                            <label
+                              class="ant-checkbox-wrapper"
                             >
-                              <input
-                                class="ant-checkbox-input"
-                                type="checkbox"
-                              />
                               <span
-                                class="ant-checkbox-inner"
-                              />
-                            </span>
-                          </label>
-                        </div>
+                                class="ant-checkbox"
+                              >
+                                <input
+                                  class="ant-checkbox-input"
+                                  type="checkbox"
+                                />
+                                <span
+                                  class="ant-checkbox-inner"
+                                />
+                              </span>
+                            </label>
+                          </div>
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -242,25 +256,32 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
                         class="ant-table-selection-column"
                       >
                         <div>
-                          <div
-                            class="ant-table-selection"
+                          <span
+                            class="ant-table-column-title"
                           >
-                            <label
-                              class="ant-checkbox-wrapper"
+                            <div
+                              class="ant-table-selection"
                             >
-                              <span
-                                class="ant-checkbox"
+                              <label
+                                class="ant-checkbox-wrapper"
                               >
-                                <input
-                                  class="ant-checkbox-input"
-                                  type="checkbox"
-                                />
                                 <span
-                                  class="ant-checkbox-inner"
-                                />
-                              </span>
-                            </label>
-                          </div>
+                                  class="ant-checkbox"
+                                >
+                                  <input
+                                    class="ant-checkbox-input"
+                                    type="checkbox"
+                                  />
+                                  <span
+                                    class="ant-checkbox-inner"
+                                  />
+                                </span>
+                              </label>
+                            </div>
+                          </span>
+                          <span
+                            class="ant-table-column-sorter"
+                          />
                         </div>
                       </th>
                     </tr>
diff --git a/components/table/__tests__/__snapshots__/Table.sorter.test.js.snap b/components/table/__tests__/__snapshots__/Table.sorter.test.js.snap
index c984b7fcf2..6e065bb600 100644
--- a/components/table/__tests__/__snapshots__/Table.sorter.test.js.snap
+++ b/components/table/__tests__/__snapshots__/Table.sorter.test.js.snap
@@ -11,48 +11,56 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
       <div
         class="ant-table-column-sorters"
       >
-        Name
-        <div
-          class="ant-table-column-sorter"
-          title="Sort"
+        <span
+          class="ant-table-column-title"
         >
-          <i
-            aria-label="icon: caret-up"
-            class="anticon anticon-caret-up ant-table-column-sorter-up off"
+          Name
+        </span>
+        <span
+          class="ant-table-column-sorter"
+        >
+          <div
+            class="ant-table-column-sorter-inner ant-table-column-sorter-inner-full"
+            title="Sort"
           >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="caret-up"
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 1024 1024"
-              width="1em"
+            <i
+              aria-label="icon: caret-up"
+              class="anticon anticon-caret-up ant-table-column-sorter-up off"
             >
-              <path
-                d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
-              />
-            </svg>
-          </i>
-          <i
-            aria-label="icon: caret-down"
-            class="anticon anticon-caret-down ant-table-column-sorter-down off"
-          >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="caret-down"
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 1024 1024"
-              width="1em"
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="caret-up"
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 1024 1024"
+                width="1em"
+              >
+                <path
+                  d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
+                />
+              </svg>
+            </i>
+            <i
+              aria-label="icon: caret-down"
+              class="anticon anticon-caret-down ant-table-column-sorter-down off"
             >
-              <path
-                d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
-              />
-            </svg>
-          </i>
-        </div>
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="caret-down"
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 1024 1024"
+                width="1em"
+              >
+                <path
+                  d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                />
+              </svg>
+            </i>
+          </div>
+        </span>
       </div>
     </th>
   </tr>
diff --git a/components/table/__tests__/__snapshots__/Table.test.js.snap b/components/table/__tests__/__snapshots__/Table.test.js.snap
index 9571f57a29..164c4e16ee 100644
--- a/components/table/__tests__/__snapshots__/Table.test.js.snap
+++ b/components/table/__tests__/__snapshots__/Table.test.js.snap
@@ -36,7 +36,14 @@ exports[`Table renders JSX correctly 1`] = `
                     colspan="2"
                   >
                     <div>
-                      Name
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Name
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
@@ -44,7 +51,14 @@ exports[`Table renders JSX correctly 1`] = `
                     rowspan="2"
                   >
                     <div>
-                      Age
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Age
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                 </tr>
@@ -53,14 +67,28 @@ exports[`Table renders JSX correctly 1`] = `
                     class=""
                   >
                     <div>
-                      First Name
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        First Name
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Last Name
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Last Name
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                 </tr>
diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap
index d2dc5daf12..ebfdada48b 100755
--- a/components/table/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/table/__tests__/__snapshots__/demo.test.js.snap
@@ -41,55 +41,70 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
                     <div
                       class="ant-table-column-sorters"
                     >
-                      Name
-                      <div
-                        class="ant-table-column-sorter"
-                        title="Sort"
+                      <span
+                        class="ant-table-column-title"
                       >
-                        <i
-                          aria-label="icon: caret-up"
-                          class="anticon anticon-caret-up ant-table-column-sorter-up off"
+                        Name
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      >
+                        <div
+                          class="ant-table-column-sorter-inner ant-table-column-sorter-inner-full"
+                          title="Sort"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class=""
-                            data-icon="caret-up"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 1024 1024"
-                            width="1em"
+                          <i
+                            aria-label="icon: caret-up"
+                            class="anticon anticon-caret-up ant-table-column-sorter-up off"
                           >
-                            <path
-                              d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
-                            />
-                          </svg>
-                        </i>
-                        <i
-                          aria-label="icon: caret-down"
-                          class="anticon anticon-caret-down ant-table-column-sorter-down off"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class=""
-                            data-icon="caret-down"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 1024 1024"
-                            width="1em"
+                            <svg
+                              aria-hidden="true"
+                              class=""
+                              data-icon="caret-up"
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 1024 1024"
+                              width="1em"
+                            >
+                              <path
+                                d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
+                              />
+                            </svg>
+                          </i>
+                          <i
+                            aria-label="icon: caret-down"
+                            class="anticon anticon-caret-down ant-table-column-sorter-down off"
                           >
-                            <path
-                              d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
-                            />
-                          </svg>
-                        </i>
-                      </div>
+                            <svg
+                              aria-hidden="true"
+                              class=""
+                              data-icon="caret-down"
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 1024 1024"
+                              width="1em"
+                            >
+                              <path
+                                d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                              />
+                            </svg>
+                          </i>
+                        </div>
+                      </span>
                     </div>
                   </th>
                   <th
                     class="ant-table-column-has-actions ant-table-column-has-filters"
                   >
                     <div>
-                      Gender
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Gender
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                     <i
                       aria-label="icon: filter"
@@ -116,7 +131,14 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
                     class=""
                   >
                     <div>
-                      Email
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Email
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                 </tr>
@@ -191,35 +213,70 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
                     class=""
                   >
                     <div>
-                      Name
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Name
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Age
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Age
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Address
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Address
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Tags
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Tags
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Action
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Action
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                 </tr>
@@ -531,21 +588,42 @@ exports[`renders ./components/table/demo/bordered.md correctly 1`] = `
                     class=""
                   >
                     <div>
-                      Name
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Name
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class="column-money"
                   >
                     <div>
-                      Cash Assets
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Cash Assets
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Address
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Address
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                 </tr>
@@ -759,14 +837,28 @@ exports[`renders ./components/table/demo/colspan-rowspan.md correctly 1`] = `
                     class=""
                   >
                     <div>
-                      Name
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Name
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Age
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Age
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
@@ -774,14 +866,28 @@ exports[`renders ./components/table/demo/colspan-rowspan.md correctly 1`] = `
                     colspan="2"
                   >
                     <div>
-                      Home phone
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Home phone
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Address
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Address
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                 </tr>
@@ -1075,7 +1181,14 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
                     class="ant-table-column-has-actions ant-table-column-has-filters"
                   >
                     <div>
-                      Name
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Name
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                     <i
                       aria-label="icon: search"
@@ -1102,7 +1215,14 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
                     class="ant-table-column-has-actions ant-table-column-has-filters"
                   >
                     <div>
-                      Age
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Age
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                     <i
                       aria-label="icon: search"
@@ -1129,7 +1249,14 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
                     class="ant-table-column-has-actions ant-table-column-has-filters"
                   >
                     <div>
-                      Address
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Address
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                     <i
                       aria-label="icon: search"
@@ -1440,21 +1567,42 @@ exports[`renders ./components/table/demo/drag-sorting.md correctly 1`] = `
                     class=""
                   >
                     <div>
-                      Name
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Name
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Age
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Age
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Address
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Address
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                 </tr>
@@ -2206,53 +2354,88 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
                       class="ant-table-selection-column"
                     >
                       <div>
-                        <div
-                          class="ant-table-selection"
+                        <span
+                          class="ant-table-column-title"
                         >
-                          <label
-                            class="ant-checkbox-wrapper"
+                          <div
+                            class="ant-table-selection"
                           >
-                            <span
-                              class="ant-checkbox"
+                            <label
+                              class="ant-checkbox-wrapper"
                             >
-                              <input
-                                class="ant-checkbox-input"
-                                type="checkbox"
-                              />
                               <span
-                                class="ant-checkbox-inner"
-                              />
-                            </span>
-                          </label>
-                        </div>
+                                class="ant-checkbox"
+                              >
+                                <input
+                                  class="ant-checkbox-input"
+                                  type="checkbox"
+                                />
+                                <span
+                                  class="ant-checkbox-inner"
+                                />
+                              </span>
+                            </label>
+                          </div>
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Address
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Address
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Action
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Action
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -3374,28 +3557,56 @@ exports[`renders ./components/table/demo/edit-cell.md correctly 1`] = `
                       class=""
                     >
                       <div>
-                        name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        address
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          address
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        operation
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          operation
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -3602,28 +3813,56 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
                     class=""
                   >
                     <div>
-                      name
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        name
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      age
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        age
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      address
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        address
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      operation
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        operation
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                 </tr>
@@ -4168,28 +4407,56 @@ exports[`renders ./components/table/demo/expand.md correctly 1`] = `
                     class=""
                   >
                     <div>
-                      Name
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Name
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Age
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Age
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Address
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Address
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Action
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Action
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                 </tr>
@@ -4427,46 +4694,74 @@ exports[`renders ./components/table/demo/expand-children.md correctly 1`] = `
                     class="ant-table-selection-column"
                   >
                     <div>
-                      <div
-                        class="ant-table-selection"
+                      <span
+                        class="ant-table-column-title"
                       >
-                        <label
-                          class="ant-checkbox-wrapper"
+                        <div
+                          class="ant-table-selection"
                         >
-                          <span
-                            class="ant-checkbox"
+                          <label
+                            class="ant-checkbox-wrapper"
                           >
-                            <input
-                              class="ant-checkbox-input"
-                              type="checkbox"
-                            />
                             <span
-                              class="ant-checkbox-inner"
-                            />
-                          </span>
-                        </label>
-                      </div>
+                              class="ant-checkbox"
+                            >
+                              <input
+                                class="ant-checkbox-input"
+                                type="checkbox"
+                              />
+                              <span
+                                class="ant-checkbox-inner"
+                              />
+                            </span>
+                          </label>
+                        </div>
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Name
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Name
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Age
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Age
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Address
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Address
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                 </tr>
@@ -4704,77 +4999,154 @@ exports[`renders ./components/table/demo/fixed-columns.md correctly 1`] = `
                       class="ant-table-fixed-columns-in-body"
                     >
                       <div>
-                        Full Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Full Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class="ant-table-fixed-columns-in-body"
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Column 1
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Column 1
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Column 2
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Column 2
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Column 3
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Column 3
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Column 4
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Column 4
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Column 5
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Column 5
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Column 6
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Column 6
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Column 7
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Column 7
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Column 8
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Column 8
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class="ant-table-fixed-columns-in-body"
                     >
                       <div>
-                        Action
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Action
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -4951,14 +5323,28 @@ exports[`renders ./components/table/demo/fixed-columns.md correctly 1`] = `
                         class=""
                       >
                         <div>
-                          Full Name
+                          <span
+                            class="ant-table-column-title"
+                          >
+                            Full Name
+                          </span>
+                          <span
+                            class="ant-table-column-sorter"
+                          />
                         </div>
                       </th>
                       <th
                         class=""
                       >
                         <div>
-                          Age
+                          <span
+                            class="ant-table-column-title"
+                          >
+                            Age
+                          </span>
+                          <span
+                            class="ant-table-column-sorter"
+                          />
                         </div>
                       </th>
                     </tr>
@@ -5035,7 +5421,14 @@ exports[`renders ./components/table/demo/fixed-columns.md correctly 1`] = `
                         class=""
                       >
                         <div>
-                          Action
+                          <span
+                            class="ant-table-column-title"
+                          >
+                            Action
+                          </span>
+                          <span
+                            class="ant-table-column-sorter"
+                          />
                         </div>
                       </th>
                     </tr>
@@ -5220,77 +5613,154 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
                       class="ant-table-fixed-columns-in-body"
                     >
                       <div>
-                        Full Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Full Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class="ant-table-fixed-columns-in-body"
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Column 1
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Column 1
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Column 2
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Column 2
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Column 3
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Column 3
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Column 4
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Column 4
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Column 5
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Column 5
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Column 6
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Column 6
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Column 7
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Column 7
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Column 8
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Column 8
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class="ant-table-fixed-columns-in-body"
                     >
                       <div>
-                        Action
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Action
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -6050,14 +6520,28 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
                       class=""
                     >
                       <div>
-                        Full Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Full Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -6303,7 +6787,14 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
                       class=""
                     >
                       <div>
-                        Action
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Action
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -6676,21 +7167,42 @@ exports[`renders ./components/table/demo/fixed-header.md correctly 1`] = `
                       class=""
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Address
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Address
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -8064,7 +8576,14 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
                       rowspan="4"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -8092,7 +8611,14 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
                       colspan="4"
                     >
                       <div>
-                        Other
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Other
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
@@ -8100,7 +8626,14 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
                       colspan="2"
                     >
                       <div>
-                        Company
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Company
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
@@ -8108,7 +8641,14 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
                       rowspan="4"
                     >
                       <div>
-                        Gender
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Gender
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -8120,48 +8660,56 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
                       <div
                         class="ant-table-column-sorters"
                       >
-                        Age
-                        <div
-                          class="ant-table-column-sorter"
-                          title="Sort"
+                        <span
+                          class="ant-table-column-title"
                         >
-                          <i
-                            aria-label="icon: caret-up"
-                            class="anticon anticon-caret-up ant-table-column-sorter-up off"
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        >
+                          <div
+                            class="ant-table-column-sorter-inner ant-table-column-sorter-inner-full"
+                            title="Sort"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="caret-up"
-                              fill="currentColor"
-                              height="1em"
-                              viewBox="0 0 1024 1024"
-                              width="1em"
+                            <i
+                              aria-label="icon: caret-up"
+                              class="anticon anticon-caret-up ant-table-column-sorter-up off"
                             >
-                              <path
-                                d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
-                              />
-                            </svg>
-                          </i>
-                          <i
-                            aria-label="icon: caret-down"
-                            class="anticon anticon-caret-down ant-table-column-sorter-down off"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="caret-down"
-                              fill="currentColor"
-                              height="1em"
-                              viewBox="0 0 1024 1024"
-                              width="1em"
+                              <svg
+                                aria-hidden="true"
+                                class=""
+                                data-icon="caret-up"
+                                fill="currentColor"
+                                height="1em"
+                                viewBox="0 0 1024 1024"
+                                width="1em"
+                              >
+                                <path
+                                  d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
+                                />
+                              </svg>
+                            </i>
+                            <i
+                              aria-label="icon: caret-down"
+                              class="anticon anticon-caret-down ant-table-column-sorter-down off"
                             >
-                              <path
-                                d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
-                              />
-                            </svg>
-                          </i>
-                        </div>
+                              <svg
+                                aria-hidden="true"
+                                class=""
+                                data-icon="caret-down"
+                                fill="currentColor"
+                                height="1em"
+                                viewBox="0 0 1024 1024"
+                                width="1em"
+                              >
+                                <path
+                                  d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                                />
+                              </svg>
+                            </i>
+                          </div>
+                        </span>
                       </div>
                     </th>
                     <th
@@ -8169,7 +8717,14 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
                       colspan="3"
                     >
                       <div>
-                        Address
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Address
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
@@ -8177,7 +8732,14 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
                       rowspan="3"
                     >
                       <div>
-                        Company Address
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Company Address
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
@@ -8185,7 +8747,14 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
                       rowspan="3"
                     >
                       <div>
-                        Company Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Company Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -8195,7 +8764,14 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
                       rowspan="2"
                     >
                       <div>
-                        Street
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Street
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
@@ -8203,7 +8779,14 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
                       colspan="2"
                     >
                       <div>
-                        Block
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Block
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -8212,14 +8795,28 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
                       class=""
                     >
                       <div>
-                        Building
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Building
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Door No.
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Door No.
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -8776,7 +9373,14 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
                       rowspan="4"
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -8990,7 +9594,14 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
                       rowspan="4"
                     >
                       <div>
-                        Gender
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Gender
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -9318,30 +9929,38 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
                     <div
                       class="ant-table-column-sorters"
                     >
-                      Name
-                      <div
-                        class="ant-table-column-sorter"
-                        title="Sort"
+                      <span
+                        class="ant-table-column-title"
                       >
-                        <i
-                          aria-label="icon: caret-down"
-                          class="anticon anticon-caret-down ant-table-column-sorter-down off"
+                        Name
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      >
+                        <div
+                          class="ant-table-column-sorter-inner"
+                          title="Sort"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class=""
-                            data-icon="caret-down"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 1024 1024"
-                            width="1em"
+                          <i
+                            aria-label="icon: caret-down"
+                            class="anticon anticon-caret-down ant-table-column-sorter-down off"
                           >
-                            <path
-                              d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
-                            />
-                          </svg>
-                        </i>
-                      </div>
+                            <svg
+                              aria-hidden="true"
+                              class=""
+                              data-icon="caret-down"
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 1024 1024"
+                              width="1em"
+                            >
+                              <path
+                                d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                              />
+                            </svg>
+                          </i>
+                        </div>
+                      </span>
                     </div>
                     <i
                       aria-label="icon: filter"
@@ -9370,48 +9989,56 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
                     <div
                       class="ant-table-column-sorters"
                     >
-                      Age
-                      <div
-                        class="ant-table-column-sorter"
-                        title="Sort"
+                      <span
+                        class="ant-table-column-title"
                       >
-                        <i
-                          aria-label="icon: caret-up"
-                          class="anticon anticon-caret-up ant-table-column-sorter-up off"
+                        Age
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      >
+                        <div
+                          class="ant-table-column-sorter-inner ant-table-column-sorter-inner-full"
+                          title="Sort"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class=""
-                            data-icon="caret-up"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 1024 1024"
-                            width="1em"
+                          <i
+                            aria-label="icon: caret-up"
+                            class="anticon anticon-caret-up ant-table-column-sorter-up off"
                           >
-                            <path
-                              d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
-                            />
-                          </svg>
-                        </i>
-                        <i
-                          aria-label="icon: caret-down"
-                          class="anticon anticon-caret-down ant-table-column-sorter-down on"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class=""
-                            data-icon="caret-down"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 1024 1024"
-                            width="1em"
+                            <svg
+                              aria-hidden="true"
+                              class=""
+                              data-icon="caret-up"
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 1024 1024"
+                              width="1em"
+                            >
+                              <path
+                                d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
+                              />
+                            </svg>
+                          </i>
+                          <i
+                            aria-label="icon: caret-down"
+                            class="anticon anticon-caret-down ant-table-column-sorter-down on"
                           >
-                            <path
-                              d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
-                            />
-                          </svg>
-                        </i>
-                      </div>
+                            <svg
+                              aria-hidden="true"
+                              class=""
+                              data-icon="caret-down"
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 1024 1024"
+                              width="1em"
+                            >
+                              <path
+                                d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                              />
+                            </svg>
+                          </i>
+                        </div>
+                      </span>
                     </div>
                   </th>
                   <th
@@ -9420,48 +10047,56 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
                     <div
                       class="ant-table-column-sorters"
                     >
-                      Address
-                      <div
-                        class="ant-table-column-sorter"
-                        title="Sort"
+                      <span
+                        class="ant-table-column-title"
                       >
-                        <i
-                          aria-label="icon: caret-up"
-                          class="anticon anticon-caret-up ant-table-column-sorter-up off"
+                        Address
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      >
+                        <div
+                          class="ant-table-column-sorter-inner ant-table-column-sorter-inner-full"
+                          title="Sort"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class=""
-                            data-icon="caret-up"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 1024 1024"
-                            width="1em"
+                          <i
+                            aria-label="icon: caret-up"
+                            class="anticon anticon-caret-up ant-table-column-sorter-up off"
                           >
-                            <path
-                              d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
-                            />
-                          </svg>
-                        </i>
-                        <i
-                          aria-label="icon: caret-down"
-                          class="anticon anticon-caret-down ant-table-column-sorter-down off"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class=""
-                            data-icon="caret-down"
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 1024 1024"
-                            width="1em"
+                            <svg
+                              aria-hidden="true"
+                              class=""
+                              data-icon="caret-up"
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 1024 1024"
+                              width="1em"
+                            >
+                              <path
+                                d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
+                              />
+                            </svg>
+                          </i>
+                          <i
+                            aria-label="icon: caret-down"
+                            class="anticon anticon-caret-down ant-table-column-sorter-down off"
                           >
-                            <path
-                              d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
-                            />
-                          </svg>
-                        </i>
-                      </div>
+                            <svg
+                              aria-hidden="true"
+                              class=""
+                              data-icon="caret-down"
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 1024 1024"
+                              width="1em"
+                            >
+                              <path
+                                d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                              />
+                            </svg>
+                          </i>
+                        </div>
+                      </span>
                     </div>
                     <i
                       aria-label="icon: filter"
@@ -9704,7 +10339,14 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
                     colspan="2"
                   >
                     <div>
-                      Name
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Name
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
@@ -9712,7 +10354,14 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
                     rowspan="2"
                   >
                     <div>
-                      Age
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Age
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
@@ -9720,7 +10369,14 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
                     rowspan="2"
                   >
                     <div>
-                      Address
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Address
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
@@ -9728,7 +10384,14 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
                     rowspan="2"
                   >
                     <div>
-                      Tags
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Tags
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
@@ -9736,7 +10399,14 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
                     rowspan="2"
                   >
                     <div>
-                      Action
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Action
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                 </tr>
@@ -9745,14 +10415,28 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
                     class=""
                   >
                     <div>
-                      First Name
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        First Name
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Last Name
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Last Name
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                 </tr>
@@ -10074,49 +10758,98 @@ exports[`renders ./components/table/demo/nested-table.md correctly 1`] = `
                     class=""
                   >
                     <div>
-                      Name
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Name
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Platform
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Platform
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Version
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Version
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Upgraded
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Upgraded
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Creator
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Creator
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Date
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Date
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Action
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Action
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                 </tr>
@@ -10423,48 +11156,56 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
                       <div
                         class="ant-table-column-sorters"
                       >
-                        Name
-                        <div
-                          class="ant-table-column-sorter"
-                          title="Sort"
+                        <span
+                          class="ant-table-column-title"
                         >
-                          <i
-                            aria-label="icon: caret-up"
-                            class="anticon anticon-caret-up ant-table-column-sorter-up off"
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        >
+                          <div
+                            class="ant-table-column-sorter-inner ant-table-column-sorter-inner-full"
+                            title="Sort"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="caret-up"
-                              fill="currentColor"
-                              height="1em"
-                              viewBox="0 0 1024 1024"
-                              width="1em"
+                            <i
+                              aria-label="icon: caret-up"
+                              class="anticon anticon-caret-up ant-table-column-sorter-up off"
                             >
-                              <path
-                                d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
-                              />
-                            </svg>
-                          </i>
-                          <i
-                            aria-label="icon: caret-down"
-                            class="anticon anticon-caret-down ant-table-column-sorter-down off"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="caret-down"
-                              fill="currentColor"
-                              height="1em"
-                              viewBox="0 0 1024 1024"
-                              width="1em"
+                              <svg
+                                aria-hidden="true"
+                                class=""
+                                data-icon="caret-up"
+                                fill="currentColor"
+                                height="1em"
+                                viewBox="0 0 1024 1024"
+                                width="1em"
+                              >
+                                <path
+                                  d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
+                                />
+                              </svg>
+                            </i>
+                            <i
+                              aria-label="icon: caret-down"
+                              class="anticon anticon-caret-down ant-table-column-sorter-down off"
                             >
-                              <path
-                                d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
-                              />
-                            </svg>
-                          </i>
-                        </div>
+                              <svg
+                                aria-hidden="true"
+                                class=""
+                                data-icon="caret-down"
+                                fill="currentColor"
+                                height="1em"
+                                viewBox="0 0 1024 1024"
+                                width="1em"
+                              >
+                                <path
+                                  d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                                />
+                              </svg>
+                            </i>
+                          </div>
+                        </span>
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -10493,48 +11234,56 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
                       <div
                         class="ant-table-column-sorters"
                       >
-                        Age
-                        <div
-                          class="ant-table-column-sorter"
-                          title="Sort"
+                        <span
+                          class="ant-table-column-title"
                         >
-                          <i
-                            aria-label="icon: caret-up"
-                            class="anticon anticon-caret-up ant-table-column-sorter-up off"
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        >
+                          <div
+                            class="ant-table-column-sorter-inner ant-table-column-sorter-inner-full"
+                            title="Sort"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="caret-up"
-                              fill="currentColor"
-                              height="1em"
-                              viewBox="0 0 1024 1024"
-                              width="1em"
+                            <i
+                              aria-label="icon: caret-up"
+                              class="anticon anticon-caret-up ant-table-column-sorter-up off"
                             >
-                              <path
-                                d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
-                              />
-                            </svg>
-                          </i>
-                          <i
-                            aria-label="icon: caret-down"
-                            class="anticon anticon-caret-down ant-table-column-sorter-down off"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="caret-down"
-                              fill="currentColor"
-                              height="1em"
-                              viewBox="0 0 1024 1024"
-                              width="1em"
+                              <svg
+                                aria-hidden="true"
+                                class=""
+                                data-icon="caret-up"
+                                fill="currentColor"
+                                height="1em"
+                                viewBox="0 0 1024 1024"
+                                width="1em"
+                              >
+                                <path
+                                  d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
+                                />
+                              </svg>
+                            </i>
+                            <i
+                              aria-label="icon: caret-down"
+                              class="anticon anticon-caret-down ant-table-column-sorter-down off"
                             >
-                              <path
-                                d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
-                              />
-                            </svg>
-                          </i>
-                        </div>
+                              <svg
+                                aria-hidden="true"
+                                class=""
+                                data-icon="caret-down"
+                                fill="currentColor"
+                                height="1em"
+                                viewBox="0 0 1024 1024"
+                                width="1em"
+                              >
+                                <path
+                                  d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                                />
+                              </svg>
+                            </i>
+                          </div>
+                        </span>
                       </div>
                     </th>
                     <th
@@ -10543,48 +11292,56 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
                       <div
                         class="ant-table-column-sorters"
                       >
-                        Address
-                        <div
-                          class="ant-table-column-sorter"
-                          title="Sort"
+                        <span
+                          class="ant-table-column-title"
                         >
-                          <i
-                            aria-label="icon: caret-up"
-                            class="anticon anticon-caret-up ant-table-column-sorter-up off"
+                          Address
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        >
+                          <div
+                            class="ant-table-column-sorter-inner ant-table-column-sorter-inner-full"
+                            title="Sort"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="caret-up"
-                              fill="currentColor"
-                              height="1em"
-                              viewBox="0 0 1024 1024"
-                              width="1em"
+                            <i
+                              aria-label="icon: caret-up"
+                              class="anticon anticon-caret-up ant-table-column-sorter-up off"
                             >
-                              <path
-                                d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
-                              />
-                            </svg>
-                          </i>
-                          <i
-                            aria-label="icon: caret-down"
-                            class="anticon anticon-caret-down ant-table-column-sorter-down off"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="caret-down"
-                              fill="currentColor"
-                              height="1em"
-                              viewBox="0 0 1024 1024"
-                              width="1em"
+                              <svg
+                                aria-hidden="true"
+                                class=""
+                                data-icon="caret-up"
+                                fill="currentColor"
+                                height="1em"
+                                viewBox="0 0 1024 1024"
+                                width="1em"
+                              >
+                                <path
+                                  d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
+                                />
+                              </svg>
+                            </i>
+                            <i
+                              aria-label="icon: caret-down"
+                              class="anticon anticon-caret-down ant-table-column-sorter-down off"
                             >
-                              <path
-                                d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
-                              />
-                            </svg>
-                          </i>
-                        </div>
+                              <svg
+                                aria-hidden="true"
+                                class=""
+                                data-icon="caret-down"
+                                fill="currentColor"
+                                height="1em"
+                                viewBox="0 0 1024 1024"
+                                width="1em"
+                              >
+                                <path
+                                  d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                                />
+                              </svg>
+                            </i>
+                          </div>
+                        </span>
                       </div>
                       <i
                         aria-label="icon: filter"
@@ -10834,7 +11591,14 @@ exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = `
                     class="react-resizable"
                   >
                     <div>
-                      Date
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Date
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                     <span
                       class="react-resizable-handle"
@@ -10845,7 +11609,14 @@ exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = `
                     class="react-resizable"
                   >
                     <div>
-                      Amount
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Amount
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                     <span
                       class="react-resizable-handle"
@@ -10856,7 +11627,14 @@ exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = `
                     class="react-resizable"
                   >
                     <div>
-                      Type
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Type
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                     <span
                       class="react-resizable-handle"
@@ -10867,7 +11645,14 @@ exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = `
                     class="react-resizable"
                   >
                     <div>
-                      Note
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Note
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                     <span
                       class="react-resizable-handle"
@@ -10878,7 +11663,14 @@ exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = `
                     class=""
                   >
                     <div>
-                      Action
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Action
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                 </tr>
@@ -11118,46 +11910,74 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
                     class="ant-table-selection-column"
                   >
                     <div>
-                      <div
-                        class="ant-table-selection"
+                      <span
+                        class="ant-table-column-title"
                       >
-                        <label
-                          class="ant-checkbox-wrapper"
+                        <div
+                          class="ant-table-selection"
                         >
-                          <span
-                            class="ant-checkbox"
+                          <label
+                            class="ant-checkbox-wrapper"
                           >
-                            <input
-                              class="ant-checkbox-input"
-                              type="checkbox"
-                            />
                             <span
-                              class="ant-checkbox-inner"
-                            />
-                          </span>
-                        </label>
-                      </div>
+                              class="ant-checkbox"
+                            >
+                              <input
+                                class="ant-checkbox-input"
+                                type="checkbox"
+                              />
+                              <span
+                                class="ant-checkbox-inner"
+                              />
+                            </span>
+                          </label>
+                        </div>
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Name
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Name
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Age
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Age
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Address
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Address
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                 </tr>
@@ -11501,46 +12321,74 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
                       class="ant-table-selection-column"
                     >
                       <div>
-                        <div
-                          class="ant-table-selection"
+                        <span
+                          class="ant-table-column-title"
                         >
-                          <label
-                            class="ant-checkbox-wrapper"
+                          <div
+                            class="ant-table-selection"
                           >
-                            <span
-                              class="ant-checkbox"
+                            <label
+                              class="ant-checkbox-wrapper"
                             >
-                              <input
-                                class="ant-checkbox-input"
-                                type="checkbox"
-                              />
                               <span
-                                class="ant-checkbox-inner"
-                              />
-                            </span>
-                          </label>
-                        </div>
+                                class="ant-checkbox"
+                              >
+                                <input
+                                  class="ant-checkbox-input"
+                                  type="checkbox"
+                                />
+                                <span
+                                  class="ant-checkbox-inner"
+                                />
+                              </span>
+                            </label>
+                          </div>
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Address
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Address
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -12154,68 +13002,96 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
                     class="ant-table-selection-column ant-table-selection-column-custom"
                   >
                     <div>
-                      <div
-                        class="ant-table-selection"
+                      <span
+                        class="ant-table-column-title"
                       >
-                        <label
-                          class="ant-table-selection-select-all-custom ant-checkbox-wrapper"
-                        >
-                          <span
-                            class="ant-checkbox"
-                          >
-                            <input
-                              class="ant-checkbox-input"
-                              type="checkbox"
-                            />
-                            <span
-                              class="ant-checkbox-inner"
-                            />
-                          </span>
-                        </label>
                         <div
-                          class="ant-table-selection-down ant-dropdown-trigger"
+                          class="ant-table-selection"
                         >
-                          <i
-                            aria-label="icon: down"
-                            class="anticon anticon-down"
+                          <label
+                            class="ant-table-selection-select-all-custom ant-checkbox-wrapper"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="down"
-                              fill="currentColor"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
+                            <span
+                              class="ant-checkbox"
                             >
-                              <path
-                                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                              <input
+                                class="ant-checkbox-input"
+                                type="checkbox"
                               />
-                            </svg>
-                          </i>
+                              <span
+                                class="ant-checkbox-inner"
+                              />
+                            </span>
+                          </label>
+                          <div
+                            class="ant-table-selection-down ant-dropdown-trigger"
+                          >
+                            <i
+                              aria-label="icon: down"
+                              class="anticon anticon-down"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class=""
+                                data-icon="down"
+                                fill="currentColor"
+                                height="1em"
+                                viewBox="64 64 896 896"
+                                width="1em"
+                              >
+                                <path
+                                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                                />
+                              </svg>
+                            </i>
+                          </div>
                         </div>
-                      </div>
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Name
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Name
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Age
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Age
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Address
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Address
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                 </tr>
@@ -12829,21 +13705,42 @@ exports[`renders ./components/table/demo/size.md correctly 1`] = `
                       class=""
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Address
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Address
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -13038,21 +13935,42 @@ exports[`renders ./components/table/demo/size.md correctly 1`] = `
                       class=""
                     >
                       <div>
-                        Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Address
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Address
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
diff --git a/components/table/__tests__/__snapshots__/empty.test.js.snap b/components/table/__tests__/__snapshots__/empty.test.js.snap
index 743d9ea0f1..c503331294 100644
--- a/components/table/__tests__/__snapshots__/empty.test.js.snap
+++ b/components/table/__tests__/__snapshots__/empty.test.js.snap
@@ -40,56 +40,112 @@ exports[`Table renders empty table 1`] = `
                     class=""
                   >
                     <div>
-                      Column 1
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Column 1
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Column 2
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Column 2
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Column 3
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Column 3
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Column 4
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Column 4
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Column 5
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Column 5
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Column 6
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Column 6
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Column 7
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Column 7
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Column 8
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Column 8
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                 </tr>
@@ -167,56 +223,112 @@ exports[`Table renders empty table with custom emptyText 1`] = `
                     class=""
                   >
                     <div>
-                      Column 1
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Column 1
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Column 2
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Column 2
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Column 3
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Column 3
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Column 4
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Column 4
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Column 5
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Column 5
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Column 6
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Column 6
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Column 7
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Column 7
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Column 8
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Column 8
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                 </tr>
@@ -290,77 +402,154 @@ exports[`Table renders empty table with fixed columns 1`] = `
                       class="ant-table-fixed-columns-in-body"
                     >
                       <div>
-                        Full Name
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Full Name
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class="ant-table-fixed-columns-in-body"
                     >
                       <div>
-                        Age
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Age
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Column 1
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Column 1
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Column 2
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Column 2
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Column 3
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Column 3
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Column 4
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Column 4
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Column 5
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Column 5
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Column 6
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Column 6
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Column 7
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Column 7
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class=""
                     >
                       <div>
-                        Column 8
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Column 8
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                     <th
                       class="ant-table-fixed-columns-in-body"
                     >
                       <div>
-                        Action
+                        <span
+                          class="ant-table-column-title"
+                        >
+                          Action
+                        </span>
+                        <span
+                          class="ant-table-column-sorter"
+                        />
                       </div>
                     </th>
                   </tr>
@@ -421,14 +610,28 @@ exports[`Table renders empty table with fixed columns 1`] = `
                         class=""
                       >
                         <div>
-                          Full Name
+                          <span
+                            class="ant-table-column-title"
+                          >
+                            Full Name
+                          </span>
+                          <span
+                            class="ant-table-column-sorter"
+                          />
                         </div>
                       </th>
                       <th
                         class=""
                       >
                         <div>
-                          Age
+                          <span
+                            class="ant-table-column-title"
+                          >
+                            Age
+                          </span>
+                          <span
+                            class="ant-table-column-sorter"
+                          />
                         </div>
                       </th>
                     </tr>
@@ -466,7 +669,14 @@ exports[`Table renders empty table with fixed columns 1`] = `
                         class=""
                       >
                         <div>
-                          Action
+                          <span
+                            class="ant-table-column-title"
+                          >
+                            Action
+                          </span>
+                          <span
+                            class="ant-table-column-sorter"
+                          />
                         </div>
                       </th>
                     </tr>
@@ -547,56 +757,112 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
                     class=""
                   >
                     <div>
-                      Column 1
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Column 1
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Column 2
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Column 2
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Column 3
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Column 3
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Column 4
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Column 4
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Column 5
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Column 5
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Column 6
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Column 6
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Column 7
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Column 7
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                   <th
                     class=""
                   >
                     <div>
-                      Column 8
+                      <span
+                        class="ant-table-column-title"
+                      >
+                        Column 8
+                      </span>
+                      <span
+                        class="ant-table-column-sorter"
+                      />
                     </div>
                   </th>
                 </tr>
diff --git a/components/table/style/index.less b/components/table/style/index.less
index 3bb44cf259..ddcb9f4278 100644
--- a/components/table/style/index.less
+++ b/components/table/style/index.less
@@ -69,30 +69,43 @@
     }
 
     .@{table-prefix-cls}-column-sorter {
-      position: absolute;
-      top: 50%;
-      right: 6px;
-      width: 14px;
-      height: @font-size-lg + 1px;
-      margin-top: -(@font-size-lg + 1px) / 2;
-      color: @table-header-icon-color;
-      text-align: center;
-      transition: all 0.3s;
+      display: table-cell;
+      vertical-align: middle;
 
-      &-up,
-      &-down {
-        .iconfont-size-under-12px(11px);
-        display: block;
-        height: 4px;
-        line-height: 4px;
+      .@{table-prefix-cls}-column-sorter-inner {
+        height: 1em;
+        margin-top: 0.35em;
+        margin-left: 0.57142857em;
+        color: @table-header-icon-color;
+        line-height: 1em;
+        text-align: center;
         transition: all 0.3s;
-        &.on {
-          color: @primary-color;
-        }
-      }
 
-      &-down {
-        margin-top: 4px;
+        .@{table-prefix-cls}-column-sorter-up,
+        .@{table-prefix-cls}-column-sorter-down {
+          .iconfont-size-under-12px(11px);
+          display: block;
+          height: 1em;
+          line-height: 1em;
+          transition: all 0.3s;
+          &.on {
+            color: @primary-color;
+          }
+        }
+
+        &-full {
+          margin-top: -0.15em;
+
+          .@{table-prefix-cls}-column-sorter-up,
+          .@{table-prefix-cls}-column-sorter-down {
+            height: 0.5em;
+            line-height: 0.5em;
+          }
+
+          .@{table-prefix-cls}-column-sorter-down {
+            margin-top: 0.125em;
+          }
+        }
       }
     }
 
@@ -110,7 +123,7 @@
             background: @table-header-filter-active-bg;
           }
         }
-        // Very complicated styles logic but neccessary
+        // Very complicated styles logic but necessary
         &:hover {
           .@{iconfont-css-prefix}-filter,
           .@{table-prefix-cls}-filter-icon {
@@ -154,6 +167,13 @@
     }
 
     .@{table-prefix-cls}-column-sorters {
+      display: table;
+
+      > .@{table-prefix-cls}-column-title {
+        display: table-cell;
+        vertical-align: middle;
+      }
+
       > *:not(.@{table-prefix-cls}-column-sorter) {
         position: relative;
       }
@@ -172,10 +192,6 @@
       }
     }
 
-    &.@{table-prefix-cls}-column-has-filters .@{table-prefix-cls}-column-sorter {
-      right: 28px + 6px;
-    }
-
     &.@{table-prefix-cls}-column-has-sorters {
       user-select: none;
     }