diff --git a/packages/table/index.scss b/packages/table/index.scss
index ea0cb86..eed02de 100644
--- a/packages/table/index.scss
+++ b/packages/table/index.scss
@@ -6,7 +6,6 @@
   width: 100%;
   max-width: 100%;
   background-color: #fff;
-  font-size: 14px;
   color: #606266;
   border: 1px solid #EBEEF5;
   border-right: none;
@@ -54,7 +53,7 @@
   }
   td,
   th {
-    padding: 12px 0;
+    padding: 6px 0;
     min-width: 50px;
     box-sizing: border-box;
     text-overflow: ellipsis;
@@ -63,10 +62,35 @@
     text-align: left;
     border-bottom: 1px solid #EBEEF5;
     border-right: 1px solid #EBEEF5;
+    text-align: center;
     &.is-hidden>* {
       visibility: hidden;
     }
   }
+  &.smart-table-custom-large {
+    td,
+    th {
+      padding: 12px 0;
+    }
+  }
+  &.smart-table-custom-middle {
+    td,
+    th {
+      padding: 10px 0;
+    }
+  }
+  &.smart-table-custom-left {
+    td,
+    th {
+      text-align: left;
+    }
+  }
+  &.smart-table-custom-right {
+    td,
+    th {
+      text-align: right;
+    }
+  }
   .cell {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
@@ -75,8 +99,8 @@
     white-space: normal;
     word-break: break-all;
     line-height: 23px;
-    padding-right: 10px;
-    padding-left: 10px;
+    padding-left: 8px;
+    padding-right: 4px;
   }
   th>.cell {
     display: inline-block;
@@ -84,8 +108,8 @@
     box-sizing: border-box;
     position: relative;
     vertical-align: middle;
-    padding-left: 10px;
-    padding-right: 10px;
+    padding-left: 8px;
+    padding-right: 4px;
     width: 100%;
   }
   .smart-table_body,
diff --git a/packages/table/src/core.js b/packages/table/src/core.js
index 65d5f68..9011bf6 100644
--- a/packages/table/src/core.js
+++ b/packages/table/src/core.js
@@ -19,13 +19,20 @@ export default function initMixin(Table) {
     const vm = this;
     vm.$options = options;
     vm.isWindows = isWindows();
-    vm.scrollHeightFit = vm.isWindows ? 17 : 0;
+    vm.scrollHeightFit = vm.isWindows ? (options.scrollbarWidth ? options.scrollbarWidth : 8) : 0;
 
     const root = options.selector && document.querySelector(String(options.selector).trim());
     if (!root) return;
     const table = root.querySelector("table");
     if (!table) return;
 
+    if (options.size) {
+      root.classList.add("smart-table-custom-" + options.size)
+    }
+    if (options.textAlign) {
+      root.classList.add("smart-table-custom-" + options.textAlign)
+    }
+
     const thead = table.querySelector("thead");
     const tbody = table.querySelector("tbody");
     if (table.hasAttribute("stripe")) {
@@ -37,7 +44,7 @@ export default function initMixin(Table) {
     vm.$root = root;
 
     const theadHeight = thead.offsetHeight;
-    let customHeight = options.tableHeight || 400;
+    let customHeight = options.tableHeight || 500;
     customHeight = typeof customHeight === 'function' ? customHeight() : customHeight;
     customHeight = customHeight > theadHeight ? customHeight : (theadHeight + 100);
     const tbodyHeight = tbody.offsetHeight;
@@ -54,7 +61,7 @@ export default function initMixin(Table) {
     vm.props = initProps(thead);
 
     //获取colgroup数据数组
-    vm.colgroup = getColgroup(table);
+    vm.colgroup = getColgroup(thead, tbody, vm.props.theadLength);
     //根据头部列的二维数组 获取最小表格宽度
     vm.size.tabelWidth = table.style.width = vm.colgroup.reduce((total, num) => total + num)
     //初始化fixed元素及宽度
@@ -81,7 +88,7 @@ export default function initMixin(Table) {
 
     if (vm.isWindows) {
       let th = document.createElement("th");
-      th.setAttribute("width", "17");
+      th.setAttribute("width", vm.scrollHeightFit);
       th.setAttribute("rowspan", vm.props.shapes.length);
       thead.querySelector("tr").appendChild(th);
     }
@@ -166,7 +173,7 @@ function rollupFixed(vm, theadModel, tbodyModel) {
     if (vm.isWindows) {
       let rightPatch = document.createElement("div");
       rightPatch.className = "smart-table_fixed-right-patch";
-      rightPatch.style.width = "17px";
+      rightPatch.style.width = vm.scrollHeightFit + "px";
       rightPatch.style.height = vm.size.theadHeight + "px";
       vm.$root.appendChild(rightPatch)
     }
@@ -175,20 +182,31 @@ function rollupFixed(vm, theadModel, tbodyModel) {
 }
 
 //根据表格中的tbody第一行 查出每列的宽度并记录
-function getColgroup(table) {
+function getColgroup(thead, tbody, theadLength) {
   let arr = [];
-  const columns = table.querySelector("tbody tr").querySelectorAll("td");
-  columns.forEach(column => {
-    let width = column.offsetWidth;
-    if (width < 50) {
-      width = width + 30;
-    } else if (width >= 50 && width < 100) {
-      width = width + 50;
-    } else {
-      width = width + 60;
-    }
-    arr.push(width)
-  })
+  if (theadLength === 1) {
+    //单行
+    thead.querySelector("tr").querySelectorAll("th").forEach(column => {
+      let width = getIntByAttr(column, "width", 0);
+      if (width === 0) {
+        width = column.offsetWidth > 80 ? column.offsetWidth : 80;
+      }
+      arr.push(width)
+    })
+  } else {
+    //多行
+    tbody.querySelector("tr").querySelectorAll("td").forEach(column => {
+      let width = column.offsetWidth;
+      if (width < 50) {
+        width = width + 10;
+      } else if (width >= 50 && width < 100) {
+        width = width + 30;
+      } else {
+        width = width + 40;
+      }
+      arr.push(width)
+    })
+  }
   return arr;
 }
 
@@ -265,7 +283,7 @@ function syncPostion(vm) {
 }
 
 function initSortEvent(vm) {
-  let els = Array.from(vm.$root.querySelectorAll("th[sort"));
+  let els = Array.from(vm.$root.querySelectorAll("th[sort]"));
   if (els.length === 0) return;
   els.forEach(el => {
     el.addEventListener("click", $event => {
@@ -328,6 +346,7 @@ function initProps(thead) {
       shapes[index] = shape;
     })
   })
+  props.theadLength = rows.length;
   props.shapes = shapes;
   return props;
 }
diff --git a/public/index.html b/public/index.html
index 3bf4aae..d8e41ff 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,589 +9,842 @@
 
   <style>
     body {
-      padding: 50px 20px;
+      padding: 10px 20px;
+    }
+
+    .repo-link {
+      font-size: 16px;
+      color: #409eff;
+      text-decoration: none;
+      margin-right: 15px;
+    }
+
+    .smart-table a {
+      color: #409eff;
     }
 
     .title {
       text-align: center;
-      padding: 30px 0;
+      padding: 10px 0;
       color: #4acccc;
+      margin: 0;
     }
 
     .smart-table {
-      margin: 50px 0px;
+      margin: 20px 0px;
     }
   </style>
 </head>
 
 <body>
+  <h1 class="title">Smart Table Example<a href="https://github.com/peng92055/smart-table" target="_blank"
+      rel="noopener noreferrer" class="repo-link">
+      GitHub</a></h1>
+  <div class="container">
+    <div class="api-wrap">
+      <h3>API</h3>
+      <p> new SmartUI.Table(options)</p>
+      <p> options: {</p>
+      <p> &nbsp;&nbsp;&nbsp;selector: 元素容器"string" 必填</p>
+      <p> &nbsp;&nbsp;&nbsp;tableHeight: 容器高度，数值或函数"number string function" 默认500</p>
+      <p> &nbsp;&nbsp;&nbsp;size: 表格尺寸（行高度），"string：large、middle、small" 默认small</p>
+      <p> &nbsp;&nbsp;&nbsp;textAlign: 表格对齐格式，"string：left、rigth、center" 默认center</p>
+      <p> &nbsp;&nbsp;&nbsp;scrollbarWidth: window系统下滚动条宽度，"number" 默认macos：0 windows:8</p>
+      <p> }</p>
+    </div>
 
-  <h1 class="title">Smart Table Example</h1>
+    <div class="example-wrap">
+      <div class="smart-table" id="smartTable1">
+        <table stripe>
+          <thead>
+            <tr>
+              <th colspan="1" rowspan="3" fixed sort>
+                <div class="cell">Id</div>
+              </th>
+              <th colspan="1" rowspan="2" width="200" fixed>
+                <div class="cell">日期</div>
+              </th>
+              <th colspan="1" rowspan="2" width="60" sort>
+                <div class="cell">姓名</div>
+              </th>
+              <th colspan="1" width="200" rowspan="1">
+                <div class="cell">省份</div>
+              </th>
+              <th colspan="1" rowspan="1" sort>
+                <div class="cell">市区</div>
+              </th>
+              <th colspan="1" rowspan="1">
+                <div class="cell">地址</div>
+              </th>
+              <th colspan="1" rowspan="1" fixed>
+                <div class="cell">邮编</div>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <div class="cell">12</div>
+              </td>
+              <td>
+                <div class="cell">2016-01-03</div>
+              </td>
+              <td>
+                <div class="cell">1王小虎</div>
+              </td>
+              <td>
+                <div class="cell">1上海</div>
+              </td>
+              <td>
+                <div class="cell">2普陀区</div>
+              </td>
+              <td>
+                <div class="cell">3上海市普陀区金沙江路 1518 弄</div>
+              </td>
+              <td>
+                <div class="cell">200331</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="cell">13</div>
+              </td>
+              <td>
+                <div class="cell">2016-02-03</div>
+              </td>
+              <td>
+                <div class="cell">2王小虎</div>
+              </td>
+              <td>
+                <div class="cell">3上海</div>
+              </td>
+              <td>
+                <div class="cell">4普陀区</div>
+              </td>
+              <td>
+                <div class="cell">2上海市普陀区金沙江路 1518 弄</div>
+              </td>
+              <td>
+                <div class="cell">200331</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="cell">14</div>
+              </td>
+              <td>
+                <div class="cell">2016-03-03</div>
+              </td>
+              <td>
+                <div class="cell">3王小虎</div>
+              </td>
+              <td>
+                <div class="cell">4上海</div>
+              </td>
+              <td>
+                <div class="cell">1普陀区</div>
+              </td>
+              <td>
+                <div class="cell">6上海市普陀区金沙江路 1518 弄</div>
+              </td>
+              <td>
+                <div class="cell">200331</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="cell">13</div>
+              </td>
+              <td>
+                <div class="cell">2016-02-03</div>
+              </td>
+              <td>
+                <div class="cell">2王小虎</div>
+              </td>
+              <td>
+                <div class="cell">3上海</div>
+              </td>
+              <td>
+                <div class="cell">4普陀区</div>
+              </td>
+              <td>
+                <div class="cell">2上海市普陀区金沙江路 1518 弄</div>
+              </td>
+              <td>
+                <div class="cell">200331</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="cell">14</div>
+              </td>
+              <td>
+                <div class="cell">2016-03-03</div>
+              </td>
+              <td>
+                <div class="cell">3王小虎</div>
+              </td>
+              <td>
+                <div class="cell">4上海</div>
+              </td>
+              <td>
+                <div class="cell">1普陀区</div>
+              </td>
+              <td>
+                <div class="cell">6上海市普陀区金沙江路 1518 弄</div>
+              </td>
+              <td>
+                <div class="cell">200331</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="cell">13</div>
+              </td>
+              <td>
+                <div class="cell">2016-02-03</div>
+              </td>
+              <td>
+                <div class="cell">2王小虎</div>
+              </td>
+              <td>
+                <div class="cell">3上海</div>
+              </td>
+              <td>
+                <div class="cell">4普陀区</div>
+              </td>
+              <td>
+                <div class="cell">2上海市普陀区金沙江路 1518 弄</div>
+              </td>
+              <td>
+                <div class="cell">200331</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="cell">14</div>
+              </td>
+              <td>
+                <div class="cell">2016-03-03</div>
+              </td>
+              <td>
+                <div class="cell">3王小虎</div>
+              </td>
+              <td>
+                <div class="cell">4上海</div>
+              </td>
+              <td>
+                <div class="cell">1普陀区</div>
+              </td>
+              <td>
+                <div class="cell">6上海市普陀区金沙江路 1518 弄</div>
+              </td>
+              <td>
+                <div class="cell">200331</div>
+              </td>
+            </tr>
+            <tr unsort>
+              <td>
+                <div class="cell">15</div>
+              </td>
+              <td>
+                <div class="cell">2016-04-03</div>
+              </td>
+              <td>
+                <div class="cell">5王小虎</div>
+              </td>
+              <td>
+                <div class="cell">6上海</div>
+              </td>
+              <td>
+                <div class="cell">7普陀区</div>
+              </td>
+              <td>
+                <div class="cell">8上海市普陀区金沙江路 1518 弄</div>
+              </td>
+              <td>
+                <div class="cell">200331</div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <!--   smart table example start -->
+      <div class="smart-table" id="smartTable2">
+        <table>
+          <thead>
+            <tr>
+              <th colspan="1" rowspan="3" fixed sort="number">
+                <div class="cell">Id</div>
+              </th>
+              <th colspan="1" rowspan="3" sort fixed>
+                <div class="cell">日期</div>
+              </th>
+              <th colspan="5" rowspan="1" sort>
+                <div class="cell">配送信息</div>
+              </th>
+              <th colspan="1" rowspan="3" fixed>
+                <div class="cell">操作</div>
+              </th>
+            </tr>
+            <tr>
+              <th colspan="1" rowspan="2" sort>
+                <div class="cell">姓名</div>
+              </th>
+              <th colspan="4" rowspan="1" sort>
+                <div class="cell">地址</div>
+              </th>
+            </tr>
+            <tr>
+              <th colspan="1" rowspan="1">
+                <div class="cell">省份</div>
+              </th>
+              <th colspan="1" rowspan="1">
+                <div class="cell">市区</div>
+              </th>
+              <th colspan="1" rowspan="1">
+                <div class="cell">地址</div>
+              </th>
+              <th colspan="1" rowspan="1" sort>
+                <div class="cell">邮编</div>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <div class="cell">11</div>
+              </td>
+              <td>
+                <div class="cell">2016-05-02</div>
+              </td>
+              <td>
+                <div class="cell">王小虎2</div>
+              </td>
+              <td>
+                <div class="cell">上海2</div>
+              </td>
+              <td>
+                <div class="cell">普陀区2</div>
+              </td>
+              <td>
+                <div class="cell">上海市普陀区金沙江路 1518 弄2</div>
+              </td>
+              <td>
+                <div class="cell">200332</div>
+              </td>
+              <td>
+                <div class="cell"><a href="#">查看2</a></div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="cell">2</div>
+              </td>
+              <td>
+                <div class="cell">2016-05-03</div>
+              </td>
+              <td>
+                <div class="cell">上小虎3</div>
+              </td>
+              <td>
+                <div class="cell">上海3</div>
+              </td>
+              <td>
+                <div class="cell">普陀区3</div>
+              </td>
+              <td>
+                <div class="cell">上海市普陀区金沙江路 1518 弄3</div>
+              </td>
+              <td>
+                <div class="cell">200333</div>
+              </td>
+              <td>
+                <div class="cell"><a href="#">查看3</a></div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="cell">13</div>
+              </td>
+              <td>
+                <div class="cell">2016-01-03</div>
+              </td>
+              <td>
+                <div class="cell">小小虎1</div>
+              </td>
+              <td>
+                <div class="cell">上海1</div>
+              </td>
+              <td>
+                <div class="cell">普陀区1</div>
+              </td>
+              <td>
+                <div class="cell">上海市普陀区金沙江路 1518 弄1</div>
+              </td>
+              <td>
+                <div class="cell">200331</div>
+              </td>
+              <td>
+                <div class="cell"><a href="#">查看1</a></div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="cell">5</div>
+              </td>
+              <td>
+                <div class="cell">2016-05-04</div>
+              </td>
+              <td>
+                <div class="cell">王小虎4</div>
+              </td>
+              <td>
+                <div class="cell">上海4</div>
+              </td>
+              <td>
+                <div class="cell">普陀区4</div>
+              </td>
+              <td>
+                <div class="cell">上海市普陀区金沙江路 1518 弄4</div>
+              </td>
+              <td>
+                <div class="cell">200334</div>
+              </td>
+              <td>
+                <div class="cell"><a href="#">查看4</a></div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="cell">13</div>
+              </td>
+              <td>
+                <div class="cell">2016-01-03</div>
+              </td>
+              <td>
+                <div class="cell">小小虎1</div>
+              </td>
+              <td>
+                <div class="cell">上海1</div>
+              </td>
+              <td>
+                <div class="cell">普陀区1</div>
+              </td>
+              <td>
+                <div class="cell">上海市普陀区金沙江路 1518 弄1</div>
+              </td>
+              <td>
+                <div class="cell">200331</div>
+              </td>
+              <td>
+                <div class="cell"><a href="#">查看1</a></div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="cell">5</div>
+              </td>
+              <td>
+                <div class="cell">2016-05-04</div>
+              </td>
+              <td>
+                <div class="cell">王小虎4</div>
+              </td>
+              <td>
+                <div class="cell">上海4</div>
+              </td>
+              <td>
+                <div class="cell">普陀区4</div>
+              </td>
+              <td>
+                <div class="cell">上海市普陀区金沙江路 1518 弄4</div>
+              </td>
+              <td>
+                <div class="cell">200334</div>
+              </td>
+              <td>
+                <div class="cell"><a href="#">查看4</a></div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <!--   smart table example end -->
+      <!--   smart table example start -->
 
-  <!--   smart table example start -->
-  <div class="smart-table" id="smartTable1">
-    <table>
-      <thead>
-        <tr>
-          <th colspan="1" rowspan="3" fixed sort="number">
-            <div class="cell">Id</div>
-          </th>
-          <th colspan="1" rowspan="3" sort fixed>
-            <div class="cell">日期</div>
-          </th>
-          <th colspan="5" rowspan="1" sort>
-            <div class="cell">配送信息</div>
-          </th>
-          <th colspan="1" rowspan="3" fixed>
-            <div class="cell">操作</div>
-          </th>
-        </tr>
-        <tr>
-          <th colspan="1" rowspan="2" sort>
-            <div class="cell">姓名</div>
-          </th>
-          <th colspan="4" rowspan="1" sort>
-            <div class="cell">地址</div>
-          </th>
-        </tr>
-        <tr>
-          <th colspan="1" rowspan="1">
-            <div class="cell">省份</div>
-          </th>
-          <th colspan="1" rowspan="1">
-            <div class="cell">市区</div>
-          </th>
-          <th colspan="1" rowspan="1">
-            <div class="cell">地址</div>
-          </th>
-          <th colspan="1" rowspan="1" sort>
-            <div class="cell">邮编</div>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>
-            <div class="cell">11</div>
-          </td>
-          <td>
-            <div class="cell">2016-05-02</div>
-          </td>
-          <td>
-            <div class="cell">王小虎2</div>
-          </td>
-          <td>
-            <div class="cell">上海2</div>
-          </td>
-          <td>
-            <div class="cell">普陀区2</div>
-          </td>
-          <td>
-            <div class="cell">上海市普陀区金沙江路 1518 弄2</div>
-          </td>
-          <td>
-            <div class="cell">200332</div>
-          </td>
-          <td>
-            <div class="cell"><a href="#">查看2</a></div>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <div class="cell">2</div>
-          </td>
-          <td>
-            <div class="cell">2016-05-03</div>
-          </td>
-          <td>
-            <div class="cell">上小虎3</div>
-          </td>
-          <td>
-            <div class="cell">上海3</div>
-          </td>
-          <td>
-            <div class="cell">普陀区3</div>
-          </td>
-          <td>
-            <div class="cell">上海市普陀区金沙江路 1518 弄3</div>
-          </td>
-          <td>
-            <div class="cell">200333</div>
-          </td>
-          <td>
-            <div class="cell"><a href="#">查看3</a></div>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <div class="cell">13</div>
-          </td>
-          <td>
-            <div class="cell">2016-01-03</div>
-          </td>
-          <td>
-            <div class="cell">小小虎1</div>
-          </td>
-          <td>
-            <div class="cell">上海1</div>
-          </td>
-          <td>
-            <div class="cell">普陀区1</div>
-          </td>
-          <td>
-            <div class="cell">上海市普陀区金沙江路 1518 弄1</div>
-          </td>
-          <td>
-            <div class="cell">200331</div>
-          </td>
-          <td>
-            <div class="cell"><a href="#">查看1</a></div>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <div class="cell">5</div>
-          </td>
-          <td>
-            <div class="cell">2016-05-04</div>
-          </td>
-          <td>
-            <div class="cell">王小虎4</div>
-          </td>
-          <td>
-            <div class="cell">上海4</div>
-          </td>
-          <td>
-            <div class="cell">普陀区4</div>
-          </td>
-          <td>
-            <div class="cell">上海市普陀区金沙江路 1518 弄4</div>
-          </td>
-          <td>
-            <div class="cell">200334</div>
-          </td>
-          <td>
-            <div class="cell"><a href="#">查看4</a></div>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <div class="cell">13</div>
-          </td>
-          <td>
-            <div class="cell">2016-01-03</div>
-          </td>
-          <td>
-            <div class="cell">小小虎1</div>
-          </td>
-          <td>
-            <div class="cell">上海1</div>
-          </td>
-          <td>
-            <div class="cell">普陀区1</div>
-          </td>
-          <td>
-            <div class="cell">上海市普陀区金沙江路 1518 弄1</div>
-          </td>
-          <td>
-            <div class="cell">200331</div>
-          </td>
-          <td>
-            <div class="cell"><a href="#">查看1</a></div>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <div class="cell">5</div>
-          </td>
-          <td>
-            <div class="cell">2016-05-04</div>
-          </td>
-          <td>
-            <div class="cell">王小虎4</div>
-          </td>
-          <td>
-            <div class="cell">上海4</div>
-          </td>
-          <td>
-            <div class="cell">普陀区4</div>
-          </td>
-          <td>
-            <div class="cell">上海市普陀区金沙江路 1518 弄4</div>
-          </td>
-          <td>
-            <div class="cell">200334</div>
-          </td>
-          <td>
-            <div class="cell"><a href="#">查看4</a></div>
-          </td>
-        </tr>
-      </tbody>
-    </table style="width: 100%">
-  </div>
-  <!--   smart table example end -->
-  <!--   smart table example start -->
-  <div class="smart-table" id="smartTable2">
-    <table stripe>
-      <thead>
-        <tr>
-          <th colspan="1" rowspan="3" fixed sort>
-            <div class="cell">Id</div>
-          </th>
-          <th colspan="2" rowspan="1">
-            <div class="cell">详细</div>
-          </th>
-          <th colspan="4" rowspan="1">
-            <div class="cell">配送信息</div>
-          </th>
-        </tr>
-        <tr>
-          <th colspan="1" rowspan="2" sort>
-            <div class="cell">日期</div>
-          </th>
-          <th colspan="1" rowspan="2">
-            <div class="cell">姓名</div>
-          </th>
-          <th colspan="4" rowspan="1">
-            <div class="cell">地址</div>
-          </th>
-        </tr>
-        <tr>
-          <th colspan="1" rowspan="1">
-            <div class="cell">省份</div>
-          </th>
-          <th colspan="1" rowspan="1" sort>
-            <div class="cell">市区</div>
-          </th>
-          <th colspan="1" rowspan="1">
-            <div class="cell">地址</div>
-          </th>
-          <th colspan="1" rowspan="1" sortable>
-            <div class="cell">邮编</div>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>
-            <div class="cell">12</div>
-          </td>
-          <td>
-            <div class="cell">2016-01-03</div>
-          </td>
-          <td>
-            <div class="cell">1王小虎</div>
-          </td>
-          <td>
-            <div class="cell">1上海</div>
-          </td>
-          <td>
-            <div class="cell">2普陀区</div>
-          </td>
-          <td>
-            <div class="cell">3上海市普陀区金沙江路 1518 弄</div>
-          </td>
-          <td>
-            <div class="cell">200331</div>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <div class="cell">13</div>
-          </td>
-          <td>
-            <div class="cell">2016-02-03</div>
-          </td>
-          <td>
-            <div class="cell">2王小虎</div>
-          </td>
-          <td>
-            <div class="cell">3上海</div>
-          </td>
-          <td>
-            <div class="cell">4普陀区</div>
-          </td>
-          <td>
-            <div class="cell">2上海市普陀区金沙江路 1518 弄</div>
-          </td>
-          <td>
-            <div class="cell">200331</div>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <div class="cell">14</div>
-          </td>
-          <td>
-            <div class="cell">2016-03-03</div>
-          </td>
-          <td>
-            <div class="cell">3王小虎</div>
-          </td>
-          <td>
-            <div class="cell">4上海</div>
-          </td>
-          <td>
-            <div class="cell">1普陀区</div>
-          </td>
-          <td>
-            <div class="cell">6上海市普陀区金沙江路 1518 弄</div>
-          </td>
-          <td>
-            <div class="cell">200331</div>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <div class="cell">13</div>
-          </td>
-          <td>
-            <div class="cell">2016-02-03</div>
-          </td>
-          <td>
-            <div class="cell">2王小虎</div>
-          </td>
-          <td>
-            <div class="cell">3上海</div>
-          </td>
-          <td>
-            <div class="cell">4普陀区</div>
-          </td>
-          <td>
-            <div class="cell">2上海市普陀区金沙江路 1518 弄</div>
-          </td>
-          <td>
-            <div class="cell">200331</div>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <div class="cell">14</div>
-          </td>
-          <td>
-            <div class="cell">2016-03-03</div>
-          </td>
-          <td>
-            <div class="cell">3王小虎</div>
-          </td>
-          <td>
-            <div class="cell">4上海</div>
-          </td>
-          <td>
-            <div class="cell">1普陀区</div>
-          </td>
-          <td>
-            <div class="cell">6上海市普陀区金沙江路 1518 弄</div>
-          </td>
-          <td>
-            <div class="cell">200331</div>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <div class="cell">13</div>
-          </td>
-          <td>
-            <div class="cell">2016-02-03</div>
-          </td>
-          <td>
-            <div class="cell">2王小虎</div>
-          </td>
-          <td>
-            <div class="cell">3上海</div>
-          </td>
-          <td>
-            <div class="cell">4普陀区</div>
-          </td>
-          <td>
-            <div class="cell">2上海市普陀区金沙江路 1518 弄</div>
-          </td>
-          <td>
-            <div class="cell">200331</div>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <div class="cell">14</div>
-          </td>
-          <td>
-            <div class="cell">2016-03-03</div>
-          </td>
-          <td>
-            <div class="cell">3王小虎</div>
-          </td>
-          <td>
-            <div class="cell">4上海</div>
-          </td>
-          <td>
-            <div class="cell">1普陀区</div>
-          </td>
-          <td>
-            <div class="cell">6上海市普陀区金沙江路 1518 弄</div>
-          </td>
-          <td>
-            <div class="cell">200331</div>
-          </td>
-        </tr>
-        <tr unsort>
-          <td>
-            <div class="cell">15</div>
-          </td>
-          <td>
-            <div class="cell">2016-04-03</div>
-          </td>
-          <td>
-            <div class="cell">5王小虎</div>
-          </td>
-          <td>
-            <div class="cell">6上海</div>
-          </td>
-          <td>
-            <div class="cell">7普陀区</div>
-          </td>
-          <td>
-            <div class="cell">8上海市普陀区金沙江路 1518 弄</div>
-          </td>
-          <td>
-            <div class="cell">200331</div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+      <!--   smart table example start -->
+      <div class="smart-table" id="smartTable3">
+        <table stripe>
+          <thead>
+            <tr>
+              <th colspan="1" rowspan="3" fixed sort>
+                <div class="cell">Id</div>
+              </th>
+              <th colspan="2" rowspan="1">
+                <div class="cell">详细</div>
+              </th>
+              <th colspan="4" rowspan="1">
+                <div class="cell">配送信息</div>
+              </th>
+            </tr>
+            <tr>
+              <th colspan="1" rowspan="2" sort>
+                <div class="cell">日期</div>
+              </th>
+              <th colspan="1" rowspan="2">
+                <div class="cell">姓名</div>
+              </th>
+              <th colspan="4" rowspan="1">
+                <div class="cell">地址</div>
+              </th>
+            </tr>
+            <tr>
+              <th colspan="1" rowspan="1">
+                <div class="cell">省份</div>
+              </th>
+              <th colspan="1" rowspan="1" sort>
+                <div class="cell">市区</div>
+              </th>
+              <th colspan="1" rowspan="1">
+                <div class="cell">地址</div>
+              </th>
+              <th colspan="1" rowspan="1" sortable>
+                <div class="cell">邮编</div>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <div class="cell">12</div>
+              </td>
+              <td>
+                <div class="cell">2016-01-03</div>
+              </td>
+              <td>
+                <div class="cell">1王小虎</div>
+              </td>
+              <td>
+                <div class="cell">1上海</div>
+              </td>
+              <td>
+                <div class="cell">2普陀区</div>
+              </td>
+              <td>
+                <div class="cell">3上海市普陀区金沙江路 1518 弄</div>
+              </td>
+              <td>
+                <div class="cell">200331</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="cell">13</div>
+              </td>
+              <td>
+                <div class="cell">2016-02-03</div>
+              </td>
+              <td>
+                <div class="cell">2王小虎</div>
+              </td>
+              <td>
+                <div class="cell">3上海</div>
+              </td>
+              <td>
+                <div class="cell">4普陀区</div>
+              </td>
+              <td>
+                <div class="cell">2上海市普陀区金沙江路 1518 弄</div>
+              </td>
+              <td>
+                <div class="cell">200331</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="cell">14</div>
+              </td>
+              <td>
+                <div class="cell">2016-03-03</div>
+              </td>
+              <td>
+                <div class="cell">3王小虎</div>
+              </td>
+              <td>
+                <div class="cell">4上海</div>
+              </td>
+              <td>
+                <div class="cell">1普陀区</div>
+              </td>
+              <td>
+                <div class="cell">6上海市普陀区金沙江路 1518 弄</div>
+              </td>
+              <td>
+                <div class="cell">200331</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="cell">13</div>
+              </td>
+              <td>
+                <div class="cell">2016-02-03</div>
+              </td>
+              <td>
+                <div class="cell">2王小虎</div>
+              </td>
+              <td>
+                <div class="cell">3上海</div>
+              </td>
+              <td>
+                <div class="cell">4普陀区</div>
+              </td>
+              <td>
+                <div class="cell">2上海市普陀区金沙江路 1518 弄</div>
+              </td>
+              <td>
+                <div class="cell">200331</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="cell">14</div>
+              </td>
+              <td>
+                <div class="cell">2016-03-03</div>
+              </td>
+              <td>
+                <div class="cell">3王小虎</div>
+              </td>
+              <td>
+                <div class="cell">4上海</div>
+              </td>
+              <td>
+                <div class="cell">1普陀区</div>
+              </td>
+              <td>
+                <div class="cell">6上海市普陀区金沙江路 1518 弄</div>
+              </td>
+              <td>
+                <div class="cell">200331</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="cell">13</div>
+              </td>
+              <td>
+                <div class="cell">2016-02-03</div>
+              </td>
+              <td>
+                <div class="cell">2王小虎</div>
+              </td>
+              <td>
+                <div class="cell">3上海</div>
+              </td>
+              <td>
+                <div class="cell">4普陀区</div>
+              </td>
+              <td>
+                <div class="cell">2上海市普陀区金沙江路 1518 弄</div>
+              </td>
+              <td>
+                <div class="cell">200331</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="cell">14</div>
+              </td>
+              <td>
+                <div class="cell">2016-03-03</div>
+              </td>
+              <td>
+                <div class="cell">3王小虎</div>
+              </td>
+              <td>
+                <div class="cell">4上海</div>
+              </td>
+              <td>
+                <div class="cell">1普陀区</div>
+              </td>
+              <td>
+                <div class="cell">6上海市普陀区金沙江路 1518 弄</div>
+              </td>
+              <td>
+                <div class="cell">200331</div>
+              </td>
+            </tr>
+            <tr unsort>
+              <td>
+                <div class="cell">15</div>
+              </td>
+              <td>
+                <div class="cell">2016-04-03</div>
+              </td>
+              <td>
+                <div class="cell">5王小虎</div>
+              </td>
+              <td>
+                <div class="cell">6上海</div>
+              </td>
+              <td>
+                <div class="cell">7普陀区</div>
+              </td>
+              <td>
+                <div class="cell">8上海市普陀区金沙江路 1518 弄</div>
+              </td>
+              <td>
+                <div class="cell">200331</div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="smart-table" id="smartTable4">
+        <table>
+          <thead>
+            <tr>
+              <th colspan="1" rowspan="3" fixed sort>
+                <div class="cell">Id</div>
+              </th>
+              <th colspan="2" rowspan="1">
+                <div class="cell">详细</div>
+              </th>
+              <th colspan="4" rowspan="1">
+                <div class="cell">配送信息</div>
+              </th>
+            </tr>
+            <tr>
+              <th colspan="1" rowspan="2" sort>
+                <div class="cell">日期</div>
+              </th>
+              <th colspan="1" rowspan="2">
+                <div class="cell">姓名</div>
+              </th>
+              <th colspan="4" rowspan="1">
+                <div class="cell">地址</div>
+              </th>
+            </tr>
+            <tr>
+              <th colspan="1" rowspan="1">
+                <div class="cell">省份</div>
+              </th>
+              <th colspan="1" rowspan="1" sort>
+                <div class="cell">市区</div>
+              </th>
+              <th colspan="1" rowspan="1">
+                <div class="cell">地址</div>
+              </th>
+              <th colspan="1" rowspan="1" sort>
+                <div class="cell">邮编</div>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td rowspan="2">
+                <div class="cell">12</div>
+              </td>
+              <td rowspan="2">
+                <div class="cell">2016-01-03</div>
+              </td>
+              <td>
+                <div class="cell">1王小虎</div>
+              </td>
+              <td>
+                <div class="cell">1上海</div>
+              </td>
+              <td>
+                <div class="cell">2普陀区</div>
+              </td>
+              <td>
+                <div class="cell">3上海市普陀区金沙江路 1518 弄</div>
+              </td>
+              <td>
+                <div class="cell">200331</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="cell">2016-02-03</div>
+              </td>
+              <td>
+                <div class="cell">3上海</div>
+              </td>
+              <td>
+                <div class="cell">4普陀区</div>
+              </td>
+              <td>
+                <div class="cell">2上海市普陀区金沙江路 1518 弄</div>
+              </td>
+              <td>
+                <div class="cell">200331</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="cell">14</div>
+              </td>
+              <td>
+                <div class="cell">2016-03-03</div>
+              </td>
+              <td>
+                <div class="cell">3王小虎</div>
+              </td>
+              <td>
+                <div class="cell">4上海</div>
+              </td>
+              <td>
+                <div class="cell">1普陀区</div>
+              </td>
+              <td>
+                <div class="cell">6上海市普陀区金沙江路 1518 弄</div>
+              </td>
+              <td>
+                <div class="cell">200331</div>
+              </td>
+            </tr>
+            <tr unsort>
+              <td colspan="5">
+                <div class="cell">合计</div>
+              </td>
+              <td>
+                <div class="cell">888888</div>
+              </td>
+              <td>
+                <div class="cell">999999</div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
   </div>
 
-  <div class="smart-table" id="smartTable3">
-    <table>
-      <thead>
-        <tr>
-          <th colspan="1" rowspan="3" fixed sort>
-            <div class="cell">Id</div>
-          </th>
-          <th colspan="2" rowspan="1">
-            <div class="cell">详细</div>
-          </th>
-          <th colspan="4" rowspan="1">
-            <div class="cell">配送信息</div>
-          </th>
-        </tr>
-        <tr>
-          <th colspan="1" rowspan="2" sort>
-            <div class="cell">日期</div>
-          </th>
-          <th colspan="1" rowspan="2">
-            <div class="cell">姓名</div>
-          </th>
-          <th colspan="4" rowspan="1">
-            <div class="cell">地址</div>
-          </th>
-        </tr>
-        <tr>
-          <th colspan="1" rowspan="1">
-            <div class="cell">省份</div>
-          </th>
-          <th colspan="1" rowspan="1" sort>
-            <div class="cell">市区</div>
-          </th>
-          <th colspan="1" rowspan="1">
-            <div class="cell">地址</div>
-          </th>
-          <th colspan="1" rowspan="1" sort>
-            <div class="cell">邮编</div>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td rowspan="2">
-            <div class="cell">12</div>
-          </td>
-          <td rowspan="2">
-            <div class="cell">2016-01-03</div>
-          </td>
-          <td>
-            <div class="cell">1王小虎</div>
-          </td>
-          <td>
-            <div class="cell">1上海</div>
-          </td>
-          <td>
-            <div class="cell">2普陀区</div>
-          </td>
-          <td>
-            <div class="cell">3上海市普陀区金沙江路 1518 弄</div>
-          </td>
-          <td>
-            <div class="cell">200331</div>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <div class="cell">2016-02-03</div>
-          </td>
-          <td>
-            <div class="cell">3上海</div>
-          </td>
-          <td>
-            <div class="cell">4普陀区</div>
-          </td>
-          <td>
-            <div class="cell">2上海市普陀区金沙江路 1518 弄</div>
-          </td>
-          <td>
-            <div class="cell">200331</div>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <div class="cell">14</div>
-          </td>
-          <td>
-            <div class="cell">2016-03-03</div>
-          </td>
-          <td>
-            <div class="cell">3王小虎</div>
-          </td>
-          <td>
-            <div class="cell">4上海</div>
-          </td>
-          <td>
-            <div class="cell">1普陀区</div>
-          </td>
-          <td>
-            <div class="cell">6上海市普陀区金沙江路 1518 弄</div>
-          </td>
-          <td>
-            <div class="cell">200331</div>
-          </td>
-        </tr>
-        <tr unsort>
-          <td colspan="5">
-            <div class="cell">合计</div>
-          </td>
-          <td>
-            <div class="cell">888888</div>
-          </td>
-          <td>
-            <div class="cell">999999</div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-  <!--   smart table example end -->
   <script>
     new SmartUI.Table({
       selector: '#smartTable1',
-      tableHeight: 300
+      tableHeight: function () {
+        return 300
+      },
     })
     new SmartUI.Table({
       selector: '#smartTable2',
-      tableHeight: function () {
-        return 300
-      }
+      tableHeight: 300,
+      textAlign: 'left',
+      size: 'middle',
+      scrollbarWidth: 17
     })
     new SmartUI.Table({
-      selector: '#smartTable3'
+      selector: '#smartTable3',
+      textAlign: 'right',
+      size: 'large'
+    })
+    new SmartUI.Table({
+      selector: '#smartTable4'
     })
   </script>