更新表格

src/scroll/index.wc

@@ -1,5 +1,5 @@
 <template>
-  <div class="container"><slot></slot></div>
+  <div class="container"><slot /></div>
   <div class="is-horizontal"><span class="thumb"></span></div>
   <div class="is-vertical"><span class="thumb"></span></div>
 </template>

src/table/index.wc

@@ -13,19 +13,35 @@
   color: nth($cd, 1);
 }
 .table {
-  overflow: hidden;
-  flex: 1;
   display: flex;
   flex-direction: column;
-  border: 1px solid nth($cp, 3);
+  width: 100%;
+  height: 100%;
 
   .thead,
   .tfoot {
+    overflow: hidden;
     width: 100%;
+    border: 1px solid nth($cp, 3);
+    --border-bottom: 0;
     background: nth($cp, 1);
     user-select: none;
     -moz-user-select: none;
   }
+  .thead {
+    border-bottom: 0;
+  }
+  .tfoot {
+    display: none;
+    border-top: 0;
+  }
+  .tbody {
+    border: 1px solid nth($cp, 3);
+
+    ::slotted(wc-tr:last-child) {
+      --border-bottom: 0;
+    }
+  }
 }
 </style>
 
@@ -63,7 +79,7 @@ export default class Table {
           } else {
             w = ''
           }
-          return `<wc-td leaf align="center" ${w}>${name}</wc-td>`
+          return `<wc-td no-border align="center" ${w}>${name}</wc-td>`
         })
         .join('')
     }

src/table/td.wc

@@ -8,9 +8,15 @@
   display: flex;
   align-items: center;
   min-width: 60px;
+  // height: auto;
+  border-left: 1px solid nth($cp, 3);
+
+  .cell {
     min-height: 36px;
-  border-right: 1px solid nth($cp, 3);
+    padding: 3px 5px;
-  border-top: 1px solid nth($cp, 3);
+    word-wrap: break-word;
+    word-break: break-all;
+  }
 }
 :host([flex='2']) {
   flex: 2;
@@ -39,12 +45,6 @@
 :host([align='right']) {
   justify-content: flex-end;
 }
-
-.cell {
-  padding: 3px 5px;
-  word-wrap: break-word;
-  word-break: break-all;
-}
 </style>
 
 <script>

src/table/tr.wc

@@ -1,26 +1,30 @@
 <template>
-  <slot />
+  <div class="tr"><slot /></div>
 </template>
 
 <style lang="scss">
 :host {
   display: flex;
   // min-height: 36px;
+  width: auto;
   color: inherit;
+
+  .tr {
+    flex: 1;
+    display: flex;
+    flex-wrap: nowrap;
+    // border-top: var(--border, 0);
+    // border-right: var(--border, 0);
+    border-bottom: var(--border-bottom, 1px solid nth($cp, 3));
+    // border-left: var(--border, 0);
+  }
 }
 :host(:hover) {
   background-color: #fbfbfb;
 }
 
-:host(.thead) ::slotted(wc-td[leaf]) {
+::slotted(wc-td:first-child) {
-  border-top: 0;
+  border-left: 0;
-}
-::slotted(wc-td:last-child) {
-  border-right: 0;
-}
-
-:host(.thead) {
-  overflow-x: hidden;
 }
 </style>