Repository: Tencent/tdesign-mobile-vue
Pull request #740 (2023-05-29 09:00:29)

feat(table): add table
<!--
首先，感谢你的贡献！😄
请阅读并遵循 [TDesign 贡献指南](https://github.com/Tencent/tdesign/blob/main/docs/contributing.md)，填写以下 pull request 的信息。
PR 在维护者审核通过后会合并，谢谢！
-->

### 🤔 这个 PR 的性质是？

- [ ] 日常 bug 修复
- [x] 新特性提交
- [ ] 文档改进
- [ ] 演示代码改进
- [ ] 组件样式/交互改进
- [ ] CI/CD 改进
- [ ] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 分支合并
- [ ] 其他

### 🔗 相关 Issue

<!--
1. 描述相关需求的来源，如相关的 issue 讨论链接。
-->

### 相关 pr
common: https://github.com/Tencent/tdesign-common/pull/1357

### 效果展示

https://github.com/Tencent/tdesign-mobile-vue/assets/51158141/181042e5-1460-44d6-92f8-fc29f194c08b


### 💡 需求背景和解决方案
说明： 目前 table 仅支持到数据展示，自定义内容和固定行列功能后续补充
<!--
1. 要解决的具体问题。
2. 列出最终的 API 实现和用法。
3. 涉及UI/交互变动需要有截图或 GIF。
-->

### 📝 更新日志

<!--
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
-->

- feat(table): 新增 table 组件

- [ ] 本条 PR 不需要纳入 Changelog

### ☑️ 请求合并前的自查清单

⚠️ 请自检并全部**勾选全部选项**。⚠️

- [ ] 文档已补充或无须补充
- [ ] 代码演示已提供或无须提供
- [ ] TypeScript 定义已补充或无须补充
- [ ] Changelog 已提供或无须提供


github-actions[bot]: <a href="https://preview-pr740-tdesign-mobile-vue.surge.sh"><img height="96" alt="完成" src="https://user-images.githubusercontent.com/15634204/150816437-9f5bb788-cd67-4cbc-9897-b82d74e9aa65.png" /></a>
<!-- [工作流地址](https://github.com/Tencent/tdesign-mobile-vue/actions/runs/5110338645) -->
<!-- AUTO_PREVIEW_HOOK -->
github-actions[bot]: **Size Change:** +14.9 kB (+3%) 

**Total Size:** 471 kB

| Filename | Size | Change |  |
| :--- | :---: | :---: | :---: |
| `./dist/tdesign.css` | 35.5 kB | +4.58 kB (+15%) | ⚠️ |
| `./dist/tdesign.js` | 277 kB | +3.69 kB (+1%) |  |
| `./dist/tdesign.min.css` | 26 kB | +3.23 kB (+14%) | ⚠️ |
| `./dist/tdesign.min.js` | 133 kB | +3.39 kB (+3%) |  |
github-actions[bot]: **Size Change:** +14.9 kB (+3%) 

**Total Size:** 471 kB

| Filename | Size | Change |  |
| :--- | :---: | :---: | :---: |
| `./dist/tdesign.css` | 35.5 kB | +4.58 kB (+15%) | ⚠️ |
| `./dist/tdesign.js` | 277 kB | +3.69 kB (+1%) |  |
| `./dist/tdesign.min.css` | 26 kB | +3.23 kB (+14%) | ⚠️ |
| `./dist/tdesign.min.js` | 133 kB | +3.39 kB (+3%) |  |
github-actions[bot]: **Size Change:** +14.9 kB (+3%) 

**Total Size:** 471 kB

| Filename | Size | Change |  |
| :--- | :---: | :---: | :---: |
| `./dist/tdesign.css` | 35.5 kB | +4.58 kB (+15%) | ⚠️ |
| `./dist/tdesign.js` | 277 kB | +3.69 kB (+1%) |  |
| `./dist/tdesign.min.css` | 26 kB | +3.23 kB (+14%) | ⚠️ |
| `./dist/tdesign.min.js` | 133 kB | +3.39 kB (+3%) |  |

Patch:
diff --git a/site/docs.config.js b/site/docs.config.js
index 4511df64..679fcc37 100644
--- a/site/docs.config.js
+++ b/site/docs.config.js
@@ -282,6 +282,12 @@ export default {
           path: '/mobile-vue/components/swiper',
           component: () => import('@/swiper/swiper.md'),
         },
+        {
+          title: 'Table 表格',
+          name: 'table',
+          path: '/mobile-vue/components/table',
+          component: () => import('@/table/table.md'),
+        },
         {
           title: 'ImageViewer 图片预览',
           name: 'image-viewer',
diff --git a/src/_common b/src/_common
index b1ceda43..69c4ee07 160000
--- a/src/_common
+++ b/src/_common
@@ -1,1 +1,1 @@
-Subproject commit b1ceda43ba52bb80b1e85259bf5e3ef9664dae2e
+Subproject commit 69c4ee07d0bb127201c9eb7677bd74c6aef2fdf5
diff --git a/src/components.ts b/src/components.ts
index c19cad6e..c67fbe73 100644
--- a/src/components.ts
+++ b/src/components.ts
@@ -53,3 +53,4 @@ export { default as Empty } from './empty';
 export { default as Link } from './link';
 export { Form, FormItem } from './form';
 export { default as Icon } from './icon';
+export { default as Table } from './table';
diff --git a/src/table/base-table-props.ts b/src/table/base-table-props.ts
new file mode 100644
index 00000000..ee8ee051
--- /dev/null
+++ b/src/table/base-table-props.ts
@@ -0,0 +1,91 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdBaseTableProps } from '../table/type';
+import { PropType } from 'vue';
+
+export default {
+  /** 是否显示表格边框 */
+  bordered: Boolean,
+  /** 单元格数据为空时呈现的内容 */
+  cellEmptyContent: {
+    type: [String, Function] as PropType<TdBaseTableProps['cellEmptyContent']>,
+  },
+  /** 列配置，泛型 T 指表格数据类型 */
+  columns: {
+    type: Array as PropType<TdBaseTableProps['columns']>,
+    default: (): TdBaseTableProps['columns'] => [],
+  },
+  /** 数据源，泛型 T 指表格数据类型 */
+  data: {
+    type: Array as PropType<TdBaseTableProps['data']>,
+    default: (): TdBaseTableProps['data'] => [],
+  },
+  /** 空表格呈现样式，支持全局配置 `GlobalConfigProvider` */
+  empty: {
+    type: [String, Function] as PropType<TdBaseTableProps['empty']>,
+    default: '',
+  },
+  /** 固定行（冻结行），示例：[M, N]，表示冻结表头 M 行和表尾 N 行。M 和 N 值为 0 时，表示不冻结行 */
+  fixedRows: {
+    type: Array as PropType<TdBaseTableProps['fixedRows']>,
+  },
+  /** 表格高度，超出后会出现滚动条。示例：100,  '30%',  '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight` */
+  height: {
+    type: [String, Number] as PropType<TdBaseTableProps['height']>,
+  },
+  /** 加载中状态。值为 `true` 会显示默认加载中样式，可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态 */
+  loading: {
+    type: [Boolean, Function] as PropType<TdBaseTableProps['loading']>,
+    default: undefined,
+  },
+  /** 表格最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px */
+  maxHeight: {
+    type: [String, Number] as PropType<TdBaseTableProps['maxHeight']>,
+  },
+  /** 唯一标识一行数据的字段名，来源于 `data` 中的字段。如果是字段嵌套多层，可以设置形如 `item.a.id` 的方法 */
+  rowKey: {
+    type: String,
+    default: 'id',
+    required: true,
+  },
+  /** 是否显示表头 */
+  showHeader: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否显示斑马纹 */
+  stripe: Boolean,
+  /** 表格内容的总宽度，注意不是表格可见宽度。主要应用于 `table-layout: auto` 模式下的固定列显示。`tableContentWidth` 内容宽度的值必须大于表格可见宽度 */
+  tableContentWidth: {
+    type: String,
+    default: '',
+  },
+  /** 表格布局方式 */
+  tableLayout: {
+    type: String as PropType<TdBaseTableProps['tableLayout']>,
+    default: 'fixed' as TdBaseTableProps['tableLayout'],
+    validator(val: TdBaseTableProps['tableLayout']): boolean {
+      if (!val) return true;
+      return ['auto', 'fixed'].includes(val);
+    },
+  },
+  /** 行内容上下方向对齐 */
+  verticalAlign: {
+    type: String as PropType<TdBaseTableProps['verticalAlign']>,
+    default: 'middle' as TdBaseTableProps['verticalAlign'],
+    validator(val: TdBaseTableProps['verticalAlign']): boolean {
+      if (!val) return true;
+      return ['top', 'middle', 'bottom'].includes(val);
+    },
+  },
+  /** 单元格点击时触发 */
+  onCellClick: Function as PropType<TdBaseTableProps['onCellClick']>,
+  /** 行点击时触发，泛型 T 指表格数据类型 */
+  onRowClick: Function as PropType<TdBaseTableProps['onRowClick']>,
+  /** 表格内容滚动时触发 */
+  onScroll: Function as PropType<TdBaseTableProps['onScroll']>,
+};
diff --git a/src/table/base-table.vue b/src/table/base-table.vue
new file mode 100644
index 00000000..0c9f607d
--- /dev/null
+++ b/src/table/base-table.vue
@@ -0,0 +1,173 @@
+<template>
+  <div ref="tableRef" :class="dynamicBaseTableClasses" style="position: relative">
+    <div
+      ref="tableContentRef"
+      :class="tableBaseClass.content"
+      :style="tableContentStyles"
+      @wheel="onInnerVirtualScroll"
+    >
+      <table ref="tableElmRef" :class="tableElmClasses" :style="tableElementStyles">
+        <colgroup>
+          <col
+            v-for="col_item in columns"
+            :key="col_item.colKey"
+            :style="{
+              width: `${formatCSSUnit(col_item.width || defaultColWidth)}`,
+              minWidth: `${
+                !formatCSSUnit(col_item.width || defaultColWidth) && !col_item.minWidth && tableLayout === 'fixed'
+                  ? '80px'
+                  : formatCSSUnit(col_item.minWidth)
+              }`,
+            }"
+          />
+        </colgroup>
+        <thead v-if="showHeader" ref="theadRef" :class="theadClasses">
+          <tr>
+            <th
+              v-for="(item_th, index_th) in columns"
+              :key="index_th"
+              :class="[
+                {
+                  [`${classPrefix}-table__th-${item_th.colKey}`]: item_th.colKey,
+                  [tdEllipsisClass]: item_th.ellipsisTitle || item_th.ellipsis,
+                  [tdAlignClasses[`${item_th.align}`]]: item_th.align && item_th.align !== 'left',
+                },
+              ]"
+            >
+              <div :class="(item_th.ellipsisTitle || item_th.ellipsis) && ellipsisClasses">{{ item_th.title }}</div>
+            </th>
+          </tr>
+        </thead>
+        <tbody :class="tbodyClasses">
+          <tr v-if="empty" :class="tableBaseClass.emptyRow">
+            <td :colspan="columns?.length">
+              <div :class="tableBaseClass.empty">
+                <t-node :content="renderContentEmpty"></t-node>
+              </div>
+            </td>
+          </tr>
+          <tr
+            v-for="(tr_item, tr_index) in data"
+            v-else
+            :key="tr_index"
+            @click="handleRowClick(tr_item, tr_index, $event)"
+          >
+            <td
+              v-for="(td_item, td_index) in columns"
+              :key="td_index"
+              :class="[
+                {
+                  [tdEllipsisClass]: td_item.ellipsis,
+                  [tdAlignClasses[`${td_item.align}`]]: td_item.align && td_item.align !== 'left',
+                },
+              ]"
+              @click="handleCellClick(tr_item, td_item, tr_index, td_index, $event)"
+            >
+              <div
+                v-if="![undefined, '', null].includes(get(tr_item, td_item.colKey || ''))"
+                :class="td_item.ellipsis && ellipsisClasses"
+              >
+                {{ get(tr_item, td_item.colKey || '') }}
+              </div>
+              <t-node v-else :content="renderCellEmptyContent"></t-node>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, toRefs, getCurrentInstance } from 'vue';
+import get from 'lodash/get';
+import TdBaseTableProps from './base-table-props';
+import config from '../config';
+import useClassName from './hooks/useClassName';
+import useStyle, { formatCSSUnit } from './hooks/useStyle';
+import { renderTNode, TNode, useEmitEvent } from '../shared';
+import { formatClassNames } from './utils';
+import { TableRowData } from './type';
+
+const { prefix } = config;
+const name = `${prefix}-base-table`;
+
+export default defineComponent({
+  name,
+  components: { TNode },
+  props: TdBaseTableProps,
+  emits: ['cell-click', 'row-click', 'scroll'],
+  setup(props, context) {
+    const emitEvent = useEmitEvent(props, context.emit);
+
+    const { classPrefix, tableLayoutClasses, tableHeaderClasses, tableBaseClass, tdAlignClasses, tdEllipsisClass } =
+      useClassName();
+
+    // 表格基础样式类
+    const { tableClasses, tableContentStyles, tableElementStyles } = useStyle(props);
+
+    const defaultColWidth = props.tableLayout === 'fixed' ? '80px' : undefined;
+
+    const theadClasses = computed(() => [
+      tableHeaderClasses.header,
+      {
+        [tableHeaderClasses.fixed]: Boolean(props.maxHeight || props.height),
+        [tableBaseClass.bordered]: props.bordered,
+      },
+    ]);
+
+    const tbodyClasses = computed(() => [tableBaseClass.body]);
+
+    const ellipsisClasses = computed(() => [`${classPrefix}-table__ellipsis`, `${classPrefix}-text-ellipsis`]);
+
+    const handleRowClick = (row: TableRowData, rowIndex: number, e: MouseEvent) => {
+      const p = { row, index: rowIndex, e };
+      emitEvent('rowClick', { context: p });
+    };
+
+    const handleCellClick = (row: TableRowData, col: any, rowIndex: number, colIndex: number, e: MouseEvent) => {
+      const p = { row, col, rowIndex, colIndex, e };
+      if (col.stopPropagation) {
+        e.stopPropagation();
+      }
+      emitEvent('cellClick', { context: p });
+    };
+
+    const dynamicBaseTableClasses = computed(() => [tableClasses.value]);
+
+    const tableElmClasses = computed(() => [[tableLayoutClasses[props.tableLayout || 'fixed']]]);
+    const internalInstance = getCurrentInstance();
+    const renderContentEmpty = computed(() => renderTNode(internalInstance, 'empty'));
+    const renderCellEmptyContent = computed(() => renderTNode(internalInstance, 'cellEmptyContent'));
+
+    const onInnerVirtualScroll = (e: WheelEvent) => {
+      emitEvent('scroll', { params: e });
+    };
+
+    return {
+      ...toRefs(props),
+      classPrefix,
+      tableBaseClass,
+      dynamicBaseTableClasses,
+      tableContentStyles,
+      tableElmClasses,
+      tableElementStyles,
+      defaultColWidth,
+      tableHeaderClasses,
+      theadClasses,
+      tdAlignClasses,
+      tdEllipsisClass,
+      tbodyClasses,
+      ellipsisClasses,
+      renderContentEmpty,
+      renderCellEmptyContent,
+      formatCSSUnit,
+      formatClassNames,
+      onInnerVirtualScroll,
+      get,
+      handleCellClick,
+      handleRowClick,
+    };
+  },
+});
+</script>
diff --git a/src/table/demos/base.vue b/src/table/demos/base.vue
new file mode 100644
index 00000000..614148d9
--- /dev/null
+++ b/src/table/demos/base.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <t-table
+      row-key="index"
+      :data="data"
+      :columns="columns"
+      :show-header="showHeader"
+      cell-empty-content="-"
+      @row-click="handleRowClick"
+      @cell-click="handleCellClick"
+      @scroll="handleScroll"
+    ></t-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const data: any[] = [];
+const total = 10;
+for (let i = 0; i < total; i++) {
+  data.push({
+    index: i + 1,
+    applicant: ['内容', '内容', '内容'][i % 3],
+    status: ['内容', '内容', '内容'][i % 3],
+    channel: ['内容', '内容', '内容'][i % 3],
+    detail: {
+      email: ['内容', '内容', '内容内容内容'][i % 3],
+    },
+  });
+}
+
+const stripe = ref(true);
+const bordered = ref(true);
+const showHeader = ref(true);
+
+const columns = ref([
+  { colKey: 'applicant', title: '标题', align: 'center', ellipsis: true },
+  {
+    colKey: 'status',
+    title: '标题',
+    ellipsis: true,
+  },
+  { colKey: 'channel', title: '标题', ellipsis: true },
+  { colKey: 'detail.email', title: '标题', ellipsis: true },
+]);
+
+const handleRowClick = (e: any) => {
+  console.log('row-cliek=====', e);
+};
+
+const handleCellClick = (e: any) => {
+  console.log('cell-cliek=====', e);
+};
+
+const handleScroll = (e: any) => {
+  console.log('scroll=====', e);
+};
+</script>
diff --git a/src/table/demos/bordered.vue b/src/table/demos/bordered.vue
new file mode 100644
index 00000000..595c0c7c
--- /dev/null
+++ b/src/table/demos/bordered.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <t-table
+      row-key="index"
+      :data="data"
+      :columns="columns"
+      :stripe="stripe"
+      :bordered="bordered"
+      :show-header="showHeader"
+      cell-empty-content="-"
+      @row-click="handleRowClick"
+      @cell-click="handleCellClick"
+      @scroll="handleScroll"
+    ></t-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const data: any[] = [];
+const total = 10;
+for (let i = 0; i < total; i++) {
+  data.push({
+    index: i + 1,
+    applicant: ['内容', '内容', '内容'][i % 3],
+    status: ['内容', '内容', '内容'][i % 3],
+    channel: ['内容', '内容', '内容'][i % 3],
+    detail: {
+      email: ['内容', '内容', '内容内容内容'][i % 3],
+    },
+  });
+}
+
+const stripe = ref(true);
+const bordered = ref(true);
+const showHeader = ref(true);
+
+const columns = ref([
+  { colKey: 'applicant', title: '标题', align: 'center', ellipsis: true },
+  {
+    colKey: 'status',
+    title: '标题',
+    ellipsis: true,
+  },
+  { colKey: 'channel', title: '标题', ellipsis: true },
+  { colKey: 'detail.email', title: '标题', ellipsis: true },
+]);
+
+const handleRowClick = (e: any) => {
+  console.log('row-cliek=====', e);
+};
+
+const handleCellClick = (e: any) => {
+  console.log('cell-cliek=====', e);
+};
+
+const handleScroll = (e: any) => {
+  console.log('scroll=====', e);
+};
+</script>
diff --git a/src/table/demos/mobile.vue b/src/table/demos/mobile.vue
new file mode 100644
index 00000000..b0c08549
--- /dev/null
+++ b/src/table/demos/mobile.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="tdesign-mobile-demo">
+    <h1 class="title">Table 表格</h1>
+    <p class="summary">
+      表格常用于展示同类结构下的多种数据，易于组织、对比和分析等，并可对数据进行搜索、筛选、排序等操作。一般包括表头、数据行和表尾三部分。
+    </p>
+    <tdesign-demo-block title="01 组件类型" summary="基础表格" :padding="true">
+      <baseDemo />
+    </tdesign-demo-block>
+    <tdesign-demo-block summary="横向平铺可滚动表格" :padding="true">
+      <scrollDemo />
+    </tdesign-demo-block>
+    <tdesign-demo-block summary="带斑马纹表格样式" :padding="true">
+      <stripeDemo />
+    </tdesign-demo-block>
+    <tdesign-demo-block summary="带边框表格样式" :padding="true">
+      <borderedDemo />
+    </tdesign-demo-block>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import baseDemo from './base.vue';
+import scrollDemo from './scroll.vue';
+import stripeDemo from './stripe.vue';
+import borderedDemo from './bordered.vue';
+</script>
diff --git a/src/table/demos/scroll.vue b/src/table/demos/scroll.vue
new file mode 100644
index 00000000..2dbb6a30
--- /dev/null
+++ b/src/table/demos/scroll.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <t-table
+      row-key="index"
+      layout-table="auto"
+      :data="data"
+      :columns="columns"
+      :show-header="showHeader"
+      cell-empty-content="-"
+      @row-click="handleRowClick"
+      @cell-click="handleCellClick"
+      @scroll="handleScroll"
+    ></t-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const data: any[] = [];
+const total = 5;
+for (let i = 0; i < total; i++) {
+  data.push({
+    index: i + 1,
+    applicant: ['横向平铺内容不省略', '内容', '内容'][i % 3],
+    status: ['横向平铺内容不省略', '内容', '内容'][i % 3],
+    channel: ['横向平铺内容不省略', '内容', '内容'][i % 3],
+    detail: {
+      email: ['横向平铺内容不省略', '内容', '内容'][i % 3],
+    },
+  });
+}
+
+const stripe = ref(true);
+const bordered = ref(true);
+const showHeader = ref(true);
+
+const columns = ref([
+  { colKey: 'applicant', title: '标题', align: 'center', width: 180 },
+  {
+    colKey: 'status',
+    title: '标题',
+    width: 180,
+  },
+  { colKey: 'channel', title: '标题', width: 180 },
+  { colKey: 'detail.email', title: '标题', width: 180 },
+]);
+
+const handleRowClick = (e: any) => {
+  console.log('row-cliek=====', e);
+};
+
+const handleCellClick = (e: any) => {
+  console.log('cell-cliek=====', e);
+};
+
+const handleScroll = (e: any) => {
+  console.log('scroll=====', e);
+};
+</script>
diff --git a/src/table/demos/stripe.vue b/src/table/demos/stripe.vue
new file mode 100644
index 00000000..9511eb68
--- /dev/null
+++ b/src/table/demos/stripe.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <t-table
+      row-key="index"
+      :data="data"
+      :max-height="400"
+      :columns="columns"
+      :stripe="stripe"
+      :bordered="bordered"
+      :show-header="showHeader"
+      cell-empty-content="-"
+      @row-click="handleRowClick"
+      @cell-click="handleCellClick"
+      @scroll="handleScroll"
+    ></t-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, h } from 'vue';
+
+const data: any[] = [];
+const total = 10;
+for (let i = 0; i < total; i++) {
+  data.push({
+    index: i + 1,
+    applicant: ['内容', '内容', '内容'][i % 3],
+    status: ['内容', '内容', '内容'][i % 3],
+    channel: ['内容', '内容', '内容'][i % 3],
+    detail: {
+      email: ['内容', '内容', '内容'][i % 3],
+    },
+  });
+}
+
+const stripe = ref(true);
+const bordered = ref(true);
+const showHeader = ref(true);
+
+const columns = ref([
+  { colKey: 'applicant', title: '标题', align: 'center' },
+  {
+    colKey: 'status',
+    title: '标题',
+  },
+  { colKey: 'channel', title: '标题' },
+  { colKey: 'detail.email', title: '标题', ellipsis: true },
+]);
+
+const handleRowClick = (e: any) => {
+  console.log('row-cliek=====', e);
+};
+
+const handleCellClick = (e: any) => {
+  console.log('cell-cliek=====', e);
+};
+
+const handleScroll = (e: any) => {
+  console.log('scroll=====', e);
+};
+</script>
diff --git a/src/table/hooks/useClassName.ts b/src/table/hooks/useClassName.ts
new file mode 100644
index 00000000..c2f60c89
--- /dev/null
+++ b/src/table/hooks/useClassName.ts
@@ -0,0 +1,189 @@
+import config from '../../config';
+
+export default function useClassName() {
+  const classPrefix = config.prefix;
+  const classNames = {
+    classPrefix,
+    tableBaseClass: {
+      table: `${classPrefix}-table`,
+      columnResizableTable: `${classPrefix}-table--column-resizable`,
+      overflowVisible: `${classPrefix}-table--overflow-visible`,
+      body: `${classPrefix}-table__body`,
+      content: `${classPrefix}-table__content`,
+      topContent: `${classPrefix}-table__top-content`,
+      bottomContent: `${classPrefix}-table__bottom-content`,
+      paginationWrap: `${classPrefix}-table__pagination-wrap`,
+      tdLastRow: `${classPrefix}-table__td-last-row`,
+      tdFirstCol: `${classPrefix}-table__td-first-col`,
+      thCellInner: `${classPrefix}-table__th-cell-inner`,
+      tableRowEdit: `${classPrefix}-table--row-edit`,
+      cellEditable: `${classPrefix}-table__cell--editable`,
+      cellEditWrap: `${classPrefix}-table__cell-wrap`,
+      bordered: `${classPrefix}-table--bordered`,
+      striped: `${classPrefix}-table--striped`,
+      hover: `${classPrefix}-table--hoverable`,
+      loading: `${classPrefix}-table--loading`,
+      rowspanAndColspan: `${classPrefix}-table--rowspan-colspan`,
+      empty: `${classPrefix}-table__empty`,
+      emptyRow: `${classPrefix}-table__empty-row`,
+      headerFixed: `${classPrefix}-table--header-fixed`,
+      columnFixed: `${classPrefix}-table--column-fixed`,
+      widthOverflow: `${classPrefix}-table--width-overflow`,
+      multipleHeader: `${classPrefix}-table--multiple-header`,
+      footerAffixed: `${classPrefix}-table--footer-affixed`,
+      horizontalBarAffixed: `${classPrefix}-table--horizontal-bar-affixed`,
+      affixedHeader: `${classPrefix}-table--affixed-header`,
+      affixedHeaderElm: `${classPrefix}-table__affixed-header-elm`,
+      affixedFooterElm: `${classPrefix}-table__affixed-footer-elm`,
+      affixedFooterWrap: `${classPrefix}-table__affixed-footer-wrap`,
+      // 边框模式，固定表头，横向滚动时，右侧添加边线，分隔滚动条
+      scrollbarDivider: `${classPrefix}-table__scroll-bar-divider`,
+      // 当用户设置 height 为固定高度，为保证行元素铺满 table，则需设置 table 元素高度为 100%
+      fullHeight: `${classPrefix}-table--full-height`,
+      // 拖拽列时的标记线
+      resizeLine: `${classPrefix}-table__resize-line`,
+      obviousScrollbar: `${classPrefix}-table__scrollbar--obvious`,
+      affixedHeaderWrap: `${classPrefix}-table__affixed-header-elm-wrap`,
+    },
+
+    tdAlignClasses: {
+      left: `${classPrefix}-align-left`,
+      right: `${classPrefix}-align-right`,
+      center: `${classPrefix}-align-center`,
+    },
+
+    tableHeaderClasses: {
+      header: `${classPrefix}-table__header`,
+      thBordered: `${classPrefix}-table__header-th--bordered`,
+      fixed: `${classPrefix}-table__header--fixed`,
+      multipleHeader: `${classPrefix}-table__header--multiple`,
+    },
+
+    tableFooterClasses: {
+      footer: `${classPrefix}-table__footer`,
+      fixed: `${classPrefix}-table__footer--fixed`,
+    },
+
+    tableAlignClasses: {
+      top: `${classPrefix}-vertical-align-top`,
+      middle: `${classPrefix}-vertical-align-middle`,
+      bottom: `${classPrefix}-vertical-align-bottom`,
+    },
+
+    tableRowFixedClasses: {
+      top: `${classPrefix}-table__row--fixed-top`,
+      bottom: `${classPrefix}-table__row--fixed-bottom`,
+      firstBottom: `${classPrefix}-table__row--fixed-bottom-first`,
+      withoutBorderBottom: `${classPrefix}-table__row--without-border-bottom`,
+    },
+
+    tableColFixedClasses: {
+      left: `${classPrefix}-table__cell--fixed-left`,
+      right: `${classPrefix}-table__cell--fixed-right`,
+      lastLeft: `${classPrefix}-table__cell--fixed-left-last`,
+      firstRight: `${classPrefix}-table__cell--fixed-right-first`,
+      leftShadow: `${classPrefix}-table__content--scrollable-to-left`,
+      rightShadow: `${classPrefix}-table__content--scrollable-to-right`,
+    },
+
+    tableLayoutClasses: {
+      auto: `${classPrefix}-table--layout-auto`,
+      fixed: `${classPrefix}-table--layout-fixed`,
+    },
+
+    tdEllipsisClass: `${classPrefix}-table-td--ellipsis`,
+
+    // 行通栏，一列铺满整行
+    tableFullRowClasses: {
+      base: `${classPrefix}-table__row--full`,
+      innerFullRow: `${classPrefix}-table__row-full-inner`,
+      innerFullElement: `${classPrefix}-table__row-full-element`,
+      firstFullRow: `${classPrefix}-table__first-full-row`,
+      lastFullRow: `${classPrefix}-table__last-full-row`,
+    },
+
+    // 展开/收起行，全部类名
+    tableExpandClasses: {
+      iconBox: `${classPrefix}-table__expand-box`,
+      iconCell: `${classPrefix}-table__expandable-icon-cell`,
+      row: `${classPrefix}-table__expanded-row`,
+      rowInner: `${classPrefix}-table__expanded-row-inner`,
+      expanded: `${classPrefix}-table__row--expanded`,
+      collapsed: `${classPrefix}-table__row--collapsed`,
+    },
+
+    // 排序功能，全部类名
+    tableSortClasses: {
+      sortable: `${classPrefix}-table__cell--sortable`,
+      sortColumn: `${classPrefix}-table__sort-column`,
+      title: `${classPrefix}-table__cell--title`,
+      trigger: `${classPrefix}-table__cell--sort-trigger`,
+      doubleIcon: `${classPrefix}-table__double-icons`,
+      sortIcon: `${classPrefix}-table__sort-icon`,
+      iconDirection: {
+        asc: `${classPrefix}-table-sort-asc`,
+        desc: `${classPrefix}-table-sort-desc`,
+      },
+      iconActive: `${classPrefix}-table__sort-icon--active`,
+      iconDefault: `${classPrefix}-icon-sort--default`,
+    },
+
+    // 行选中功能，全部类名
+    tableSelectedClasses: {
+      selected: `${classPrefix}-table__row--selected`,
+      disabled: `${classPrefix}-table__row--disabled`,
+      checkCell: `${classPrefix}-table__cell-check`,
+    },
+
+    // 过滤功能，全部类名
+    tableFilterClasses: {
+      filterable: `${classPrefix}-table__cell--filterable`,
+      popup: `${classPrefix}-table__filter-pop`,
+      icon: `${classPrefix}-table__filter-icon`,
+      popupContent: `${classPrefix}-table__filter-pop-content`,
+      result: `${classPrefix}-table__filter-result`,
+      inner: `${classPrefix}-table__row-filter-inner`,
+      bottomButtons: `${classPrefix}-table__filter--bottom-buttons`,
+      contentInner: `${classPrefix}-table__filter-pop-content-inner`,
+      iconWrap: `${classPrefix}-table__filter-icon-wrap`,
+    },
+
+    // 通用类名
+    asyncLoadingClass: `${classPrefix}-table__async-loading`,
+    isFocusClass: `${classPrefix}-is-focus`,
+    isLoadingClass: `${classPrefix}-is-loading`,
+    isLoadMoreClass: `${classPrefix}-is-load-more`,
+
+    // 树形结构类名
+    tableTreeClasses: {
+      col: `${classPrefix}-table__tree-col`,
+      inlineCol: `${classPrefix}-table__tree-col--inline`,
+      icon: `${classPrefix}-table__tree-op-icon`,
+      leafNode: `${classPrefix}-table__tree-leaf-node`,
+    },
+
+    // 拖拽功能类名
+    tableDraggableClasses: {
+      rowDraggable: `${classPrefix}-table--row-draggable`,
+      rowHandlerDraggable: `${classPrefix}-table--row-handler-draggable`,
+      colDraggable: `${classPrefix}-table--col-draggable`,
+      handle: `${classPrefix}-table__handle-draggable`,
+      ghost: `${classPrefix}-table__ele--draggable-ghost`,
+      chosen: `${classPrefix}-table__ele--draggable-chosen`,
+      dragging: `${classPrefix}-table__ele--draggable-dragging`,
+      dragSortTh: `${classPrefix}-table__th--drag-sort`,
+    },
+
+    virtualScrollClasses: {
+      cursor: `${classPrefix}-table__virtual-scroll-cursor`,
+      header: `${classPrefix}-table__virtual-scroll-header`,
+    },
+
+    positiveRotate90: `${classPrefix}-positive-rotate-90`,
+    negativeRotate180: `${classPrefix}-negative-rotate-180`,
+  };
+
+  return classNames;
+}
+
+export type TableClassName = ReturnType<typeof useClassName>;
diff --git a/src/table/hooks/useStyle.ts b/src/table/hooks/useStyle.ts
new file mode 100644
index 00000000..b34cc7cf
--- /dev/null
+++ b/src/table/hooks/useStyle.ts
@@ -0,0 +1,39 @@
+import { computed, toRefs } from 'vue';
+import { TdBaseTableProps } from '../type';
+import useClassName from './useClassName';
+
+export function formatCSSUnit(unit: string | number | undefined) {
+  if (!unit) return unit;
+  return isNaN(Number(unit)) ? unit : `${unit}px`;
+}
+
+export default function useStyle(props: TdBaseTableProps) {
+  const { bordered, stripe, verticalAlign, height, maxHeight, tableContentWidth } = toRefs(props);
+
+  const { tableBaseClass, tableAlignClasses } = useClassName();
+
+  const tableClasses = computed(() => [
+    tableBaseClass.table,
+    [tableAlignClasses[verticalAlign?.value || 'middle']],
+    {
+      [tableBaseClass.bordered]: bordered?.value,
+      [tableBaseClass.striped]: stripe?.value,
+      [tableBaseClass.loading]: props.loading,
+    },
+  ]);
+
+  const tableContentStyles = computed(() => ({
+    height: formatCSSUnit(height?.value),
+    maxHeight: formatCSSUnit(maxHeight?.value),
+  }));
+
+  const tableElementStyles = computed(() => ({
+    width: formatCSSUnit(tableContentWidth?.value),
+  }));
+
+  return {
+    tableClasses,
+    tableElementStyles,
+    tableContentStyles,
+  };
+}
diff --git a/src/table/index.ts b/src/table/index.ts
new file mode 100644
index 00000000..4bef05be
--- /dev/null
+++ b/src/table/index.ts
@@ -0,0 +1,11 @@
+import BaseTable from './base-table.vue';
+import { withInstall, WithInstallType } from '../shared';
+
+import './style';
+
+export * from './type';
+export * from './interface';
+
+const _BaseTable: WithInstallType<typeof BaseTable> = withInstall(BaseTable, 'TTable');
+
+export default _BaseTable;
diff --git a/src/table/interface.ts b/src/table/interface.ts
new file mode 100644
index 00000000..3afc1142
--- /dev/null
+++ b/src/table/interface.ts
@@ -0,0 +1,45 @@
+import { TNodeReturnValue } from '../common';
+import { TableRowData, BaseTableCol } from './type';
+
+export type BaseTableColumns = BaseTableCol<TableRowData>[];
+
+export interface ColumnStickyLeftAndRight {
+  left: number[];
+  right: number[];
+  top: number[];
+  bottom?: number[];
+}
+
+export interface TableColFixedClasses {
+  left: string;
+  right: string;
+  lastLeft: string;
+  firstRight: string;
+  leftShadow: string;
+  rightShadow: string;
+}
+
+export interface TableRowFixedClasses {
+  top: string;
+  bottom: string;
+  firstBottom: string;
+  withoutBorderBottom: string;
+}
+
+export interface FixedColumnInfo {
+  left?: number;
+  right?: number;
+  top?: number;
+  bottom?: number;
+  parent?: FixedColumnInfo;
+  children?: string[];
+  width?: number;
+  height?: number;
+  col?: BaseTableCol;
+  index?: number;
+  lastLeftFixedCol?: boolean;
+  firstRightFixedCol?: boolean;
+}
+
+// 固定表头和固定列 具体的固定位置（left/top/right/bottom）
+export type RowAndColFixedPosition = Map<string | number, FixedColumnInfo>;
diff --git a/src/table/style/css.js b/src/table/style/css.js
new file mode 100644
index 00000000..6a9a4b13
--- /dev/null
+++ b/src/table/style/css.js
@@ -0,0 +1,1 @@
+import './index.css';
diff --git a/src/table/style/index.js b/src/table/style/index.js
new file mode 100644
index 00000000..bcee957e
--- /dev/null
+++ b/src/table/style/index.js
@@ -0,0 +1,1 @@
+import '../../_common/style/mobile/components/table/_index.less';
diff --git a/src/table/table.en-US.md b/src/table/table.en-US.md
new file mode 100644
index 00000000..6ce56073
--- /dev/null
+++ b/src/table/table.en-US.md
@@ -0,0 +1,53 @@
+:: BASE_DOC ::
+
+## API
+### BaseTable Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+bordered | Boolean | false | show table bordered | N
+cellEmptyContent | String / Slot / Function | - | Typescript：`string \| TNode<BaseTableCellParams<T>>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+columns | Array | [] | table column configs。Typescript：`Array<BaseTableCol<T>>` | N
+data | Array | [] | table data。Typescript：`Array<T>` | N
+empty | String / Slot / Function | '' | empty text or empty element。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+fixedRows | Array | - | Typescript：`Array<number>` | N
+height | String / Number | - | table height | N
+loading | Boolean / Slot / Function | undefined | loading state table。Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+maxHeight | String / Number | - | table max height | N
+rowKey | String | 'id' | required。unique key for each row data | Y
+showHeader | Boolean | true | show table header | N
+stripe | Boolean | false | show stripe style | N
+tableContentWidth | String | - | \- | N
+tableLayout | String | fixed | table-layout css properties。options：auto/fixed | N
+verticalAlign | String | middle | vertical align。options：top/middle/bottom | N
+onCellClick | Function |  | Typescript：`(context: BaseTableCellEventContext<T>) => void`<br/>trigger on cell clicked。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/table/type.ts)。<br/>`interface BaseTableCellEventContext<T> { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`<br/> | N
+onRowClick | Function |  | Typescript：`(context: RowEventContext<T>) => void`<br/>trigger on row click。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/table/type.ts)。<br/>`interface RowEventContext<T> { row: T; index: number; e: MouseEvent }`<br/> | N
+onScroll | Function |  | Typescript：`(params: { e: WheelEvent }) => void`<br/>trigger on table content scroll | N
+
+### BaseTable Events
+
+name | params | description
+-- | -- | --
+cell-click | `(context: BaseTableCellEventContext<T>)` | trigger on cell clicked。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/table/type.ts)。<br/>`interface BaseTableCellEventContext<T> { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`<br/>
+row-click | `(context: RowEventContext<T>)` | trigger on row click。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/table/type.ts)。<br/>`interface RowEventContext<T> { row: T; index: number; e: MouseEvent }`<br/>
+scroll | `(params: { e: WheelEvent })` | trigger on table content scroll
+
+### BaseTableInstanceFunctions 组件实例方法
+
+name | params | return | description
+-- | -- | -- | --
+refreshTable | \- | \- | required
+
+### BaseTableCol
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+align | String | left | align type。options：left/right/center | N
+cell | String / Function | - | use cell to render table cell。Typescript：`string \| TNode<BaseTableCellParams<T>>` `interface BaseTableCellParams<T> { row: T; rowIndex: number; col: BaseTableCol<T>; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/table/type.ts) | N
+colKey | String | - | unique key for column | N
+ellipsis | Boolean / Object / Slot / Function | false | ellipsis cell content。Typescript：`boolean \| TNode<BaseTableCellParams<T>> \| TooltipProps \| { props: TooltipProps; content: TNode<BaseTableCellParams<T>> }`，[Tooltip API Documents](./tooltip?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/table/type.ts) | N
+ellipsisTitle | Boolean / Object / Slot / Function | undefined | ellipsis title content。Typescript：`boolean \| TNode<BaseTableColParams<T>> \| TooltipProps \| { props: TooltipProps; content: TNode<BaseTableColParams<T>> }` `interface BaseTableColParams<T> { col: BaseTableCol<T>; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/table/type.ts) | N
+fixed | String | left | fixed current column to left or right。options：left/right | N
+minWidth | String / Number | - | add CSS property `min-width` to HTML Element `<col>`，Browsers with [TablesNG](https://docs.google.com/document/d/16PFD1GtMI9Zgwu0jtPaKZJ75Q2wyZ9EZnVbBacOfiNA/preview)  support `minWidth` | N
+title | String / Function | - | th content。Typescript：`string \| TNode<{ col: BaseTableCol; colIndex: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+width | String / Number | - | column width | N
diff --git a/src/table/table.md b/src/table/table.md
new file mode 100644
index 00000000..a8c83181
--- /dev/null
+++ b/src/table/table.md
@@ -0,0 +1,49 @@
+:: BASE_DOC ::
+
+## API
+### BaseTable Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+bordered | Boolean | false | 是否显示表格边框 | N
+cellEmptyContent | String / Slot / Function | - | 单元格数据为空时呈现的内容。TS 类型：`string \| TNode<BaseTableCellParams<T>>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+columns | Array | [] | 列配置，泛型 T 指表格数据类型。TS 类型：`Array<BaseTableCol<T>>` | N
+data | Array | [] | 数据源，泛型 T 指表格数据类型。TS 类型：`Array<T>` | N
+empty | String / Slot / Function | '' | 空表格呈现样式，支持全局配置 `GlobalConfigProvider`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+fixedRows | Array | - | 【开发中】固定行（冻结行），示例：[M, N]，表示冻结表头 M 行和表尾 N 行。M 和 N 值为 0 时，表示不冻结行。TS 类型：`Array<number>` | N
+height | String / Number | - | 表格高度，超出后会出现滚动条。示例：100,  '30%',  '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight` | N
+loading | Boolean / Slot / Function | undefined | 加载中状态。值为 `true` 会显示默认加载中样式，可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+maxHeight | String / Number | - | 表格最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px | N
+rowKey | String | 'id' | 必需。唯一标识一行数据的字段名，来源于 `data` 中的字段。如果是字段嵌套多层，可以设置形如 `item.a.id` 的方法 | Y
+showHeader | Boolean | true | 是否显示表头 | N
+stripe | Boolean | false | 是否显示斑马纹 | N
+tableContentWidth | String | - | 表格内容的总宽度，注意不是表格可见宽度。主要应用于 `table-layout: auto` 模式下的固定列显示。`tableContentWidth` 内容宽度的值必须大于表格可见宽度 | N
+tableLayout | String | fixed | 表格布局方式。可选项：auto/fixed | N
+verticalAlign | String | middle | 行内容上下方向对齐。可选项：top/middle/bottom | N
+onCellClick | Function |  | TS 类型：`(context: BaseTableCellEventContext<T>) => void`<br/>单元格点击时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/table/type.ts)。<br/>`interface BaseTableCellEventContext<T> { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`<br/> | N
+onRowClick | Function |  | TS 类型：`(context: RowEventContext<T>) => void`<br/>行点击时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/table/type.ts)。<br/>`interface RowEventContext<T> { row: T; index: number; e: MouseEvent }`<br/> | N
+onScroll | Function |  | TS 类型：`(params: { e: WheelEvent }) => void`<br/>表格内容滚动时触发 | N
+
+### BaseTable Events
+
+名称 | 参数 | 描述
+-- | -- | --
+cell-click | `(context: BaseTableCellEventContext<T>)` | 单元格点击时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/table/type.ts)。<br/>`interface BaseTableCellEventContext<T> { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`<br/>
+row-click | `(context: RowEventContext<T>)` | 行点击时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/table/type.ts)。<br/>`interface RowEventContext<T> { row: T; index: number; e: MouseEvent }`<br/>
+scroll | `(params: { e: WheelEvent })` | 表格内容滚动时触发
+
+
+
+### BaseTableCol
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+align | String | left | 列横向对齐方式。可选项：left/right/center | N
+cell | String / Function | - | 【开发中】自定义单元格渲染。值类型为 Function 表示以函数形式渲染单元格。值类型为 string 表示使用插槽渲染，插槽名称为 cell 的值。默认使用 colKey 作为插槽名称。优先级高于 render。泛型 T 指表格数据类型。TS 类型：`string \| TNode<BaseTableCellParams<T>>` `interface BaseTableCellParams<T> { row: T; rowIndex: number; col: BaseTableCol<T>; colIndex: number }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/table/type.ts) | N
+colKey | String | - | 渲染列所需字段，值为 `serial-number` 表示当前列为「序号」列 | N
+ellipsis | Boolean / Object / Slot / Function | false | 单元格和表头内容超出时，是否显示省略号。如果仅希望单元格超出省略，可设置 `ellipsisTitle = false`。<br/> 值为 `true`，则超出省略浮层默认显示单元格内容；<br/>值类型为 `Function` 则自定义超出省略浮中层显示的内容；<br/>值类型为 `Object`，则自动透传属性到 Tooltip 组件，可用于调整浮层背景色和方向等特性。<br/> 同时透传 Tooltip 属性和自定义浮层内容，请使用 `{ props: { theme: 'light' }, content: () => 'something' }`。TS 类型：`boolean \| TNode<BaseTableCellParams<T>> \| TooltipProps \| { props: TooltipProps; content: TNode<BaseTableCellParams<T>> }`，[Tooltip API Documents](./tooltip?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/table/type.ts) | N
+ellipsisTitle | Boolean / Object / Slot / Function | undefined | 表头内容超出时，是否显示省略号。优先级高于 `ellipsis`。<br/>值为 `true`，则超出省略的浮层默认显示表头全部内容；<br/>值类型为 `Function` 用于自定义超出省略浮层显示的表头内容；<br/>值类型为 `Object`，则自动透传属性到 Tooltip 组件，则自动透传属性到 Tooltip 组件，可用于调整浮层背景色和方向等特性。<br/> 同时透传 Tooltip 属性和自定义浮层内容，请使用 `{ props: { theme: 'light' }, content: () => 'something' }`。TS 类型：`boolean \| TNode<BaseTableColParams<T>> \| TooltipProps \| { props: TooltipProps; content: TNode<BaseTableColParams<T>> }` `interface BaseTableColParams<T> { col: BaseTableCol<T>; colIndex: number }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/table/type.ts) | N
+fixed | String | left | 【开发中】固定列显示位置。可选项：left/right | N
+minWidth | String / Number | - | 透传 CSS 属性 `min-width` 到 `<col>` 元素。⚠️ 仅少部分浏览器支持，如：使用 [TablesNG](https://docs.google.com/document/d/16PFD1GtMI9Zgwu0jtPaKZJ75Q2wyZ9EZnVbBacOfiNA/preview) 渲染的 Chrome 浏览器支持 `minWidth` | N
+title | String / Function | - | 自定义表头渲染。值类型为 Function 表示以函数形式渲染表头。值类型为 string 表示使用插槽渲染，插槽名称为 title 的值。优先级高于 render。TS 类型：`string \| TNode<{ col: BaseTableCol; colIndex: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+width | String / Number | - | 列宽，可以作为最小宽度使用。当列宽总和小于 `table` 元素时，浏览器根据宽度设置情况自动分配宽度；当列宽总和大于 `table` 元素，表现为定宽。可以同时调整 `table` 元素的宽度来达到自己想要的效果 | N
diff --git a/src/table/type.ts b/src/table/type.ts
new file mode 100644
index 00000000..d9a9d75b
--- /dev/null
+++ b/src/table/type.ts
@@ -0,0 +1,195 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TNode, ClassName } from '../common';
+
+export interface TdBaseTableProps<T extends TableRowData = TableRowData> {
+  /**
+   * 是否显示表格边框
+   * @default false
+   */
+  bordered?: boolean;
+  /**
+   * 单元格数据为空时呈现的内容
+   */
+  cellEmptyContent?: string | TNode<BaseTableCellParams<T>>;
+  /**
+   * 列配置，泛型 T 指表格数据类型
+   * @default []
+   */
+  columns?: Array<BaseTableCol<T>>;
+  /**
+   * 数据源，泛型 T 指表格数据类型
+   * @default []
+   */
+  data?: Array<T>;
+  /**
+   * 空表格呈现样式，支持全局配置 `GlobalConfigProvider`
+   * @default ''
+   */
+  empty?: string | TNode;
+  /**
+   * 固定行（冻结行），示例：[M, N]，表示冻结表头 M 行和表尾 N 行。M 和 N 值为 0 时，表示不冻结行
+   */
+  fixedRows?: Array<number>;
+  /**
+   * 表格高度，超出后会出现滚动条。示例：100,  '30%',  '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight`
+   */
+  height?: string | number;
+  /**
+   * 加载中状态。值为 `true` 会显示默认加载中样式，可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态
+   */
+  loading?: boolean | TNode;
+  /**
+   * 表格最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px
+   */
+  maxHeight?: string | number;
+  /**
+   * 唯一标识一行数据的字段名，来源于 `data` 中的字段。如果是字段嵌套多层，可以设置形如 `item.a.id` 的方法
+   * @default 'id'
+   */
+  rowKey: string;
+  /**
+   * 是否显示表头
+   * @default true
+   */
+  showHeader?: boolean;
+  /**
+   * 是否显示斑马纹
+   * @default false
+   */
+  stripe?: boolean;
+  /**
+   * 表格内容的总宽度，注意不是表格可见宽度。主要应用于 `table-layout: auto` 模式下的固定列显示。`tableContentWidth` 内容宽度的值必须大于表格可见宽度
+   * @default ''
+   */
+  tableContentWidth?: string;
+  /**
+   * 表格布局方式
+   * @default fixed
+   */
+  tableLayout?: 'auto' | 'fixed';
+  /**
+   * 行内容上下方向对齐
+   * @default middle
+   */
+  verticalAlign?: 'top' | 'middle' | 'bottom';
+  /**
+   * 单元格点击时触发
+   */
+  onCellClick?: (context: BaseTableCellEventContext<T>) => void;
+  /**
+   * 行点击时触发，泛型 T 指表格数据类型
+   */
+  onRowClick?: (context: RowEventContext<T>) => void;
+  /**
+   * 表格内容滚动时触发
+   */
+  onScroll?: (params: { e: WheelEvent }) => void;
+}
+
+/** 组件实例方法 */
+export interface BaseTableInstanceFunctions<T extends TableRowData = TableRowData> {
+  /**
+   * 全部重新渲染表格
+   */
+  refreshTable: () => void;
+}
+
+export interface BaseTableCol<T extends TableRowData = TableRowData> {
+  /**
+   * 列横向对齐方式
+   * @default left
+   */
+  align?: 'left' | 'right' | 'center';
+  /**
+   * 自定义单元格渲染。值类型为 Function 表示以函数形式渲染单元格。值类型为 string 表示使用插槽渲染，插槽名称为 cell 的值。默认使用 colKey 作为插槽名称。优先级高于 render。泛型 T 指表格数据类型
+   */
+  cell?: string | TNode<BaseTableCellParams<T>>;
+  /**
+   * 渲染列所需字段，值为 `serial-number` 表示当前列为「序号」列
+   * @default ''
+   */
+  colKey?: string;
+  /**
+   * 单元格和表头内容超出时，是否显示省略号。如果仅希望单元格超出省略，可设置 `ellipsisTitle = false`。<br/> 值为 `true`，则超出省略浮层默认显示单元格内容；<br/>值类型为 `Function` 则自定义超出省略浮中层显示的内容；<br/>值类型为 `Object`，则自动透传属性到 Tooltip 组件，可用于调整浮层背景色和方向等特性。<br/> 同时透传 Tooltip 属性和自定义浮层内容，请使用 `{ props: { theme: 'light' }, content: () => 'something' }`
+   * @default false
+   */
+  ellipsis?: boolean | TNode<BaseTableCellParams<T>>;
+  /**
+   * 表头内容超出时，是否显示省略号。优先级高于 `ellipsis`。<br/>值为 `true`，则超出省略的浮层默认显示表头全部内容；<br/>值类型为 `Function` 用于自定义超出省略浮层显示的表头内容；<br/>值类型为 `Object`，则自动透传属性到 Tooltip 组件，则自动透传属性到 Tooltip 组件，可用于调整浮层背景色和方向等特性。<br/> 同时透传 Tooltip 属性和自定义浮层内容，请使用 `{ props: { theme: 'light' }, content: () => 'something' }`
+   */
+  ellipsisTitle?: boolean | TNode<BaseTableColParams<T>>;
+  /**
+   * 固定列显示位置
+   * @default left
+   */
+  fixed?: 'left' | 'right';
+  /**
+   * 透传 CSS 属性 `min-width` 到 `<col>` 元素。⚠️ 仅少部分浏览器支持，如：使用 [TablesNG](https://docs.google.com/document/d/16PFD1GtMI9Zgwu0jtPaKZJ75Q2wyZ9EZnVbBacOfiNA/preview) 渲染的 Chrome 浏览器支持 `minWidth`
+   */
+  minWidth?: string | number;
+  /**
+   * 自定义表头渲染。值类型为 Function 表示以函数形式渲染表头。值类型为 string 表示使用插槽渲染，插槽名称为 title 的值。优先级高于 render
+   */
+  title?: string | TNode<{ col: BaseTableCol; colIndex: number }>;
+  /**
+   * 列宽，可以作为最小宽度使用。当列宽总和小于 `table` 元素时，浏览器根据宽度设置情况自动分配宽度；当列宽总和大于 `table` 元素，表现为定宽。可以同时调整 `table` 元素的宽度来达到自己想要的效果
+   */
+  width?: string | number;
+}
+
+export interface BaseTableCellEventContext<T> {
+  row: T;
+  col: BaseTableCol;
+  rowIndex: number;
+  colIndex: number;
+  e: MouseEvent;
+}
+
+export interface RowEventContext<T> {
+  row: T;
+  index: number;
+  e: MouseEvent;
+}
+
+export interface TableRowData {
+  [key: string]: any;
+  children?: TableRowData[];
+}
+
+export interface BaseTableCellParams<T> {
+  row: T;
+  rowIndex: number;
+  col: BaseTableCol<T>;
+  colIndex: number;
+}
+
+export interface BaseTableColParams<T> {
+  col: BaseTableCol<T>;
+  colIndex: number;
+}
+
+export interface RowClassNameParams<T> {
+  row: T;
+  rowIndex: number;
+  type?: 'body' | 'foot';
+}
+
+export type TableColumnClassName<T> = ClassName | ((context: CellData<T>) => ClassName);
+
+export interface CellData<T> extends BaseTableCellParams<T> {
+  type: 'th' | 'td';
+}
+
+export interface BaseTableCellParams<T> {
+  row: T;
+  rowIndex: number;
+  col: BaseTableCol<T>;
+  colIndex: number;
+}
+
+export type DataType = TableRowData;
diff --git a/src/table/utils.ts b/src/table/utils.ts
new file mode 100644
index 00000000..49230162
--- /dev/null
+++ b/src/table/utils.ts
@@ -0,0 +1,100 @@
+import isFunction from 'lodash/isFunction';
+import get from 'lodash/get';
+import { CellData, TableColumnClassName, TableRowData } from './type';
+
+export function toString(obj: any): string {
+  return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
+}
+
+export function debounce<T = any>(fn: Function, delay = 200): () => void {
+  let timer: ReturnType<typeof setTimeout>;
+  return function newFn(this: T, ...args: Array<any>): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const context = this;
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn.apply(context, args);
+    }, delay);
+  };
+}
+
+export interface FormatRowAttributesParams {
+  row: TableRowData;
+  rowIndex: number;
+  type: 'body' | 'foot';
+}
+
+export function formatClassNames(
+  classNames: TableColumnClassName<TableRowData> | TableColumnClassName<TableRowData>[],
+  params: CellData<TableRowData>,
+) {
+  const classes = classNames instanceof Array ? classNames : [classNames];
+  const arr: any[] = [];
+  for (let i = 0, len = classes.length; i < len; i++) {
+    const cls = classes[i];
+    if (isFunction(cls)) {
+      arr.push(cls(params));
+    } else {
+      arr.push(cls);
+    }
+  }
+  return arr;
+}
+
+export const INNER_PRE_NAME = '@@inner-';
+
+export enum SCROLL_DIRECTION {
+  X = 'x',
+  Y = 'y',
+  UNKNOWN = 'unknown',
+}
+
+let preScrollLeft: any;
+let preScrollTop: any;
+
+export const getScrollDirection = (scrollLeft: number, scrollTop: number): SCROLL_DIRECTION => {
+  let direction = SCROLL_DIRECTION.UNKNOWN;
+  if (preScrollTop !== scrollTop) {
+    direction = SCROLL_DIRECTION.Y;
+  } else if (preScrollLeft !== scrollLeft) {
+    direction = SCROLL_DIRECTION.X;
+  }
+  preScrollTop = scrollTop;
+  preScrollLeft = scrollLeft;
+  return direction;
+};
+
+export function getEditableKeysMap(keys: Array<string | number>, list: any[], rowKey: string) {
+  const map: { [key: string | number]: boolean } = {};
+  for (let i = 0, len = list.length; i < len; i++) {
+    const rowValue = get(list[i], rowKey);
+    if (keys.includes(rowValue)) {
+      map[rowValue] = true;
+    }
+  }
+  return map;
+}
+
+export function getColumnDataByKey(columns: any[], colKey: string): any {
+  for (let i = 0, len = columns.length; i < len; i++) {
+    if (columns[i].colKey === colKey) return columns[i];
+    if (columns[i].children?.length) {
+      const t = getColumnDataByKey(columns[i].children, colKey);
+      if (t) return t;
+    }
+  }
+  return null;
+}
+
+export function getColumnIndexByKey(columns: any[], colKey: string): number {
+  for (let i = 0, len = columns.length; i < len; i++) {
+    if (columns[i].colKey === colKey) {
+      return i;
+    }
+    if (columns[i].children?.length) {
+      const t = getColumnDataByKey(columns[i].children, colKey);
+      if (t) return i;
+    }
+  }
+  return -1;
+}


Test patch:
diff --git a/src/table/__test__/__snapshots__/demo.test.jsx.snap b/src/table/__test__/__snapshots__/demo.test.jsx.snap
new file mode 100644
index 00000000..0fafb5b6
--- /dev/null
+++ b/src/table/__test__/__snapshots__/demo.test.jsx.snap
@@ -0,0 +1,3566 @@
+// Vitest Snapshot v1
+
+exports[`Table > Table baseVue demo works fine 1`] = `
+<div>
+  <div
+    class="t-table t-vertical-align-middle"
+    style="position: relative;"
+  >
+    <div
+      class="t-table__content"
+    >
+      <table
+        class="t-table--layout-fixed"
+      >
+        <colgroup>
+          
+          <col
+            style="width: 80px; min-width: undefined;"
+          />
+          <col
+            style="width: 80px; min-width: undefined;"
+          />
+          <col
+            style="width: 80px; min-width: undefined;"
+          />
+          <col
+            style="width: 80px; min-width: undefined;"
+          />
+          
+        </colgroup>
+        <thead
+          class="t-table__header"
+        >
+          <tr>
+            
+            <th
+              class="t-table__th-applicant t-table-td--ellipsis t-align-center"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                标题
+              </div>
+            </th>
+            <th
+              class="t-table__th-status t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                标题
+              </div>
+            </th>
+            <th
+              class="t-table__th-channel t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                标题
+              </div>
+            </th>
+            <th
+              class="t-table__th-detail.email t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                标题
+              </div>
+            </th>
+            
+          </tr>
+        </thead>
+        <tbody
+          class="t-table__body"
+        >
+          
+          <tr>
+            
+            <td
+              class="t-table-td--ellipsis t-align-center"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-table-td--ellipsis t-align-center"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-table-td--ellipsis t-align-center"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容内容内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-table-td--ellipsis t-align-center"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-table-td--ellipsis t-align-center"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-table-td--ellipsis t-align-center"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容内容内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-table-td--ellipsis t-align-center"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-table-td--ellipsis t-align-center"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-table-td--ellipsis t-align-center"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容内容内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-table-td--ellipsis t-align-center"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Table > Table borderedVue demo works fine 1`] = `
+<div>
+  <div
+    class="t-table t-vertical-align-middle t-table--bordered t-table--striped"
+    style="position: relative;"
+  >
+    <div
+      class="t-table__content"
+    >
+      <table
+        class="t-table--layout-fixed"
+      >
+        <colgroup>
+          
+          <col
+            style="width: 80px; min-width: undefined;"
+          />
+          <col
+            style="width: 80px; min-width: undefined;"
+          />
+          <col
+            style="width: 80px; min-width: undefined;"
+          />
+          <col
+            style="width: 80px; min-width: undefined;"
+          />
+          
+        </colgroup>
+        <thead
+          class="t-table__header t-table--bordered"
+        >
+          <tr>
+            
+            <th
+              class="t-table__th-applicant t-table-td--ellipsis t-align-center"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                标题
+              </div>
+            </th>
+            <th
+              class="t-table__th-status t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                标题
+              </div>
+            </th>
+            <th
+              class="t-table__th-channel t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                标题
+              </div>
+            </th>
+            <th
+              class="t-table__th-detail.email t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                标题
+              </div>
+            </th>
+            
+          </tr>
+        </thead>
+        <tbody
+          class="t-table__body"
+        >
+          
+          <tr>
+            
+            <td
+              class="t-table-td--ellipsis t-align-center"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-table-td--ellipsis t-align-center"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-table-td--ellipsis t-align-center"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容内容内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-table-td--ellipsis t-align-center"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-table-td--ellipsis t-align-center"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-table-td--ellipsis t-align-center"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容内容内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-table-td--ellipsis t-align-center"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-table-td--ellipsis t-align-center"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-table-td--ellipsis t-align-center"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容内容内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-table-td--ellipsis t-align-center"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Table > Table mobileVue demo works fine 1`] = `
+<div
+  class="tdesign-mobile-demo"
+>
+  <h1
+    class="title"
+  >
+    Table 表格
+  </h1>
+  <p
+    class="summary"
+  >
+     表格常用于展示同类结构下的多种数据，易于组织、对比和分析等，并可对数据进行搜索、筛选、排序等操作。一般包括表头、数据行和表尾三部分。 
+  </p>
+  <div
+    class="tdesign-mobile-demo-block"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <h2
+        class="tdesign-mobile-demo-block__title"
+      >
+        01 组件类型
+      </h2>
+      <p
+        class="tdesign-mobile-demo-block__summary"
+      >
+        基础表格
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot with-padding"
+    >
+      
+      <div>
+        <div
+          class="t-table t-vertical-align-middle"
+          style="position: relative;"
+        >
+          <div
+            class="t-table__content"
+          >
+            <table
+              class="t-table--layout-fixed"
+            >
+              <colgroup>
+                
+                <col
+                  style="width: 80px; min-width: undefined;"
+                />
+                <col
+                  style="width: 80px; min-width: undefined;"
+                />
+                <col
+                  style="width: 80px; min-width: undefined;"
+                />
+                <col
+                  style="width: 80px; min-width: undefined;"
+                />
+                
+              </colgroup>
+              <thead
+                class="t-table__header"
+              >
+                <tr>
+                  
+                  <th
+                    class="t-table__th-applicant t-table-td--ellipsis t-align-center"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      标题
+                    </div>
+                  </th>
+                  <th
+                    class="t-table__th-status t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      标题
+                    </div>
+                  </th>
+                  <th
+                    class="t-table__th-channel t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      标题
+                    </div>
+                  </th>
+                  <th
+                    class="t-table__th-detail.email t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      标题
+                    </div>
+                  </th>
+                  
+                </tr>
+              </thead>
+              <tbody
+                class="t-table__body"
+              >
+                
+                <tr>
+                  
+                  <td
+                    class="t-table-td--ellipsis t-align-center"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-table-td--ellipsis t-align-center"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-table-td--ellipsis t-align-center"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容内容内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-table-td--ellipsis t-align-center"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-table-td--ellipsis t-align-center"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-table-td--ellipsis t-align-center"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容内容内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-table-td--ellipsis t-align-center"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-table-td--ellipsis t-align-center"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-table-td--ellipsis t-align-center"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容内容内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-table-td--ellipsis t-align-center"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        横向平铺可滚动表格
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot with-padding"
+    >
+      
+      <div>
+        <div
+          class="t-table t-vertical-align-middle"
+          layout-table="auto"
+          style="position: relative;"
+        >
+          <div
+            class="t-table__content"
+          >
+            <table
+              class="t-table--layout-fixed"
+            >
+              <colgroup>
+                
+                <col
+                  style="width: 180px; min-width: undefined;"
+                />
+                <col
+                  style="width: 180px; min-width: undefined;"
+                />
+                <col
+                  style="width: 180px; min-width: undefined;"
+                />
+                <col
+                  style="width: 180px; min-width: undefined;"
+                />
+                
+              </colgroup>
+              <thead
+                class="t-table__header"
+              >
+                <tr>
+                  
+                  <th
+                    class="t-table__th-applicant t-align-center"
+                  >
+                    <div
+                      class=""
+                    >
+                      标题
+                    </div>
+                  </th>
+                  <th
+                    class="t-table__th-status"
+                  >
+                    <div
+                      class=""
+                    >
+                      标题
+                    </div>
+                  </th>
+                  <th
+                    class="t-table__th-channel"
+                  >
+                    <div
+                      class=""
+                    >
+                      标题
+                    </div>
+                  </th>
+                  <th
+                    class="t-table__th-detail.email"
+                  >
+                    <div
+                      class=""
+                    >
+                      标题
+                    </div>
+                  </th>
+                  
+                </tr>
+              </thead>
+              <tbody
+                class="t-table__body"
+              >
+                
+                <tr>
+                  
+                  <td
+                    class="t-align-center"
+                  >
+                    <div
+                      class=""
+                    >
+                      横向平铺内容不省略
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      横向平铺内容不省略
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      横向平铺内容不省略
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      横向平铺内容不省略
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-align-center"
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-align-center"
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-align-center"
+                  >
+                    <div
+                      class=""
+                    >
+                      横向平铺内容不省略
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      横向平铺内容不省略
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      横向平铺内容不省略
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      横向平铺内容不省略
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-align-center"
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        带斑马纹表格样式
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot with-padding"
+    >
+      
+      <div>
+        <div
+          class="t-table t-vertical-align-middle t-table--bordered t-table--striped"
+          style="position: relative;"
+        >
+          <div
+            class="t-table__content"
+            style="max-height: 400px;"
+          >
+            <table
+              class="t-table--layout-fixed"
+            >
+              <colgroup>
+                
+                <col
+                  style="width: 80px; min-width: undefined;"
+                />
+                <col
+                  style="width: 80px; min-width: undefined;"
+                />
+                <col
+                  style="width: 80px; min-width: undefined;"
+                />
+                <col
+                  style="width: 80px; min-width: undefined;"
+                />
+                
+              </colgroup>
+              <thead
+                class="t-table__header t-table__header--fixed t-table--bordered"
+              >
+                <tr>
+                  
+                  <th
+                    class="t-table__th-applicant t-align-center"
+                  >
+                    <div
+                      class=""
+                    >
+                      标题
+                    </div>
+                  </th>
+                  <th
+                    class="t-table__th-status"
+                  >
+                    <div
+                      class=""
+                    >
+                      标题
+                    </div>
+                  </th>
+                  <th
+                    class="t-table__th-channel"
+                  >
+                    <div
+                      class=""
+                    >
+                      标题
+                    </div>
+                  </th>
+                  <th
+                    class="t-table__th-detail.email t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      标题
+                    </div>
+                  </th>
+                  
+                </tr>
+              </thead>
+              <tbody
+                class="t-table__body"
+              >
+                
+                <tr>
+                  
+                  <td
+                    class="t-align-center"
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-align-center"
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-align-center"
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-align-center"
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-align-center"
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-align-center"
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-align-center"
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-align-center"
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-align-center"
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-align-center"
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <div
+                      class=""
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        带边框表格样式
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot with-padding"
+    >
+      
+      <div>
+        <div
+          class="t-table t-vertical-align-middle t-table--bordered t-table--striped"
+          style="position: relative;"
+        >
+          <div
+            class="t-table__content"
+          >
+            <table
+              class="t-table--layout-fixed"
+            >
+              <colgroup>
+                
+                <col
+                  style="width: 80px; min-width: undefined;"
+                />
+                <col
+                  style="width: 80px; min-width: undefined;"
+                />
+                <col
+                  style="width: 80px; min-width: undefined;"
+                />
+                <col
+                  style="width: 80px; min-width: undefined;"
+                />
+                
+              </colgroup>
+              <thead
+                class="t-table__header t-table--bordered"
+              >
+                <tr>
+                  
+                  <th
+                    class="t-table__th-applicant t-table-td--ellipsis t-align-center"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      标题
+                    </div>
+                  </th>
+                  <th
+                    class="t-table__th-status t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      标题
+                    </div>
+                  </th>
+                  <th
+                    class="t-table__th-channel t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      标题
+                    </div>
+                  </th>
+                  <th
+                    class="t-table__th-detail.email t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      标题
+                    </div>
+                  </th>
+                  
+                </tr>
+              </thead>
+              <tbody
+                class="t-table__body"
+              >
+                
+                <tr>
+                  
+                  <td
+                    class="t-table-td--ellipsis t-align-center"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-table-td--ellipsis t-align-center"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-table-td--ellipsis t-align-center"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容内容内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-table-td--ellipsis t-align-center"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-table-td--ellipsis t-align-center"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-table-td--ellipsis t-align-center"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容内容内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-table-td--ellipsis t-align-center"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-table-td--ellipsis t-align-center"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-table-td--ellipsis t-align-center"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容内容内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                <tr>
+                  
+                  <td
+                    class="t-table-td--ellipsis t-align-center"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  <td
+                    class="t-table-td--ellipsis"
+                  >
+                    <div
+                      class="t-table__ellipsis t-text-ellipsis"
+                    >
+                      内容
+                    </div>
+                  </td>
+                  
+                </tr>
+                
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Table > Table scrollVue demo works fine 1`] = `
+<div>
+  <div
+    class="t-table t-vertical-align-middle"
+    layout-table="auto"
+    style="position: relative;"
+  >
+    <div
+      class="t-table__content"
+    >
+      <table
+        class="t-table--layout-fixed"
+      >
+        <colgroup>
+          
+          <col
+            style="width: 180px; min-width: undefined;"
+          />
+          <col
+            style="width: 180px; min-width: undefined;"
+          />
+          <col
+            style="width: 180px; min-width: undefined;"
+          />
+          <col
+            style="width: 180px; min-width: undefined;"
+          />
+          
+        </colgroup>
+        <thead
+          class="t-table__header"
+        >
+          <tr>
+            
+            <th
+              class="t-table__th-applicant t-align-center"
+            >
+              <div
+                class=""
+              >
+                标题
+              </div>
+            </th>
+            <th
+              class="t-table__th-status"
+            >
+              <div
+                class=""
+              >
+                标题
+              </div>
+            </th>
+            <th
+              class="t-table__th-channel"
+            >
+              <div
+                class=""
+              >
+                标题
+              </div>
+            </th>
+            <th
+              class="t-table__th-detail.email"
+            >
+              <div
+                class=""
+              >
+                标题
+              </div>
+            </th>
+            
+          </tr>
+        </thead>
+        <tbody
+          class="t-table__body"
+        >
+          
+          <tr>
+            
+            <td
+              class="t-align-center"
+            >
+              <div
+                class=""
+              >
+                横向平铺内容不省略
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                横向平铺内容不省略
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                横向平铺内容不省略
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                横向平铺内容不省略
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-align-center"
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-align-center"
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-align-center"
+            >
+              <div
+                class=""
+              >
+                横向平铺内容不省略
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                横向平铺内容不省略
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                横向平铺内容不省略
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                横向平铺内容不省略
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-align-center"
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Table > Table stripeVue demo works fine 1`] = `
+<div>
+  <div
+    class="t-table t-vertical-align-middle t-table--bordered t-table--striped"
+    style="position: relative;"
+  >
+    <div
+      class="t-table__content"
+      style="max-height: 400px;"
+    >
+      <table
+        class="t-table--layout-fixed"
+      >
+        <colgroup>
+          
+          <col
+            style="width: 80px; min-width: undefined;"
+          />
+          <col
+            style="width: 80px; min-width: undefined;"
+          />
+          <col
+            style="width: 80px; min-width: undefined;"
+          />
+          <col
+            style="width: 80px; min-width: undefined;"
+          />
+          
+        </colgroup>
+        <thead
+          class="t-table__header t-table__header--fixed t-table--bordered"
+        >
+          <tr>
+            
+            <th
+              class="t-table__th-applicant t-align-center"
+            >
+              <div
+                class=""
+              >
+                标题
+              </div>
+            </th>
+            <th
+              class="t-table__th-status"
+            >
+              <div
+                class=""
+              >
+                标题
+              </div>
+            </th>
+            <th
+              class="t-table__th-channel"
+            >
+              <div
+                class=""
+              >
+                标题
+              </div>
+            </th>
+            <th
+              class="t-table__th-detail.email t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                标题
+              </div>
+            </th>
+            
+          </tr>
+        </thead>
+        <tbody
+          class="t-table__body"
+        >
+          
+          <tr>
+            
+            <td
+              class="t-align-center"
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-align-center"
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-align-center"
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-align-center"
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-align-center"
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-align-center"
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-align-center"
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-align-center"
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-align-center"
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            
+            <td
+              class="t-align-center"
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class=""
+            >
+              <div
+                class=""
+              >
+                内容
+              </div>
+            </td>
+            <td
+              class="t-table-td--ellipsis"
+            >
+              <div
+                class="t-table__ellipsis t-text-ellipsis"
+              >
+                内容
+              </div>
+            </td>
+            
+          </tr>
+          
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/table/__test__/demo.test.jsx b/src/table/__test__/demo.test.jsx
new file mode 100644
index 00000000..553a8e33
--- /dev/null
+++ b/src/table/__test__/demo.test.jsx
@@ -0,0 +1,31 @@
+/**
+ * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
+ */
+
+import { mount } from '@vue/test-utils';
+import MockDate from 'mockdate';
+
+import baseVue from '@/table/demos/base.vue';
+import borderedVue from '@/table/demos/bordered.vue';
+import mobileVue from '@/table/demos/mobile.vue';
+import scrollVue from '@/table/demos/scroll.vue';
+import stripeVue from '@/table/demos/stripe.vue';
+
+MockDate.set('2020-12-28');
+
+const mapper = {
+  baseVue,
+  borderedVue,
+  mobileVue,
+  scrollVue,
+  stripeVue,
+};
+
+describe('Table', () => {
+  Object.keys(mapper).forEach((demoName) => {
+    it(`Table ${demoName} demo works fine`, () => {
+      const wrapper = mount(mapper[demoName]);
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+});