[improved] resolved #608

CloudDeepTeam · Jun 15, 2015 · 8966ace · 8966ace
1 parent 7ffda36
commit 8966ace
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,13 @@
 # Amaze UI Change Log
 ---
 
+### 2015.06 W3
+
+**CSS:**
+
+- `New` Table 所有单元格居中对齐样式 `.am-table-centered`；
+- `Improved` Table 全边框样式包含 `rowspan` 时后面几行第一列不显示边框问题。
+
 ### 2015.06 W2
 
 **JS:**

diff --git a/docs/css/table.md b/docs/css/table.md
@@ -470,6 +470,50 @@
 </div>
 ```
 
+## 后续更新
+
+### 2.4.x 新增
+
+- `<table>` 上添加 `.am-table-centered` 实现单元格居中对齐
+- 单元格上添加 `.am-text-middle` 可以实现垂直居中，同样，在**单元格**上添加其他文本对齐 class 可以实现想要的效果（参见[辅助类](http://amazeui.org/css/utility?_ver=2.x#wen-ben-zuo-you-dui-qi)）
+
+`````html
+<table class="am-table am-table-bordered am-table-centered">
+  <tr>
+    <th>Savings for holiday!</th>
+    <th>Month</th>
+    <th>Savings</th>
+  </tr>
+  <tr>
+    <td rowspan="2" class="am-text-middle">$50</td>
+    <td>January</td>
+    <td>$100</td>
+  </tr>
+  <tr>
+    <td>February</td>
+    <td>$80</td>
+  </tr>
+</table>
+`````
+```html
+<table class="am-table am-table-bordered am-table-centered">
+  <tr>
+    <th>Savings for holiday!</th>
+    <th>Month</th>
+    <th>Savings</th>
+  </tr>
+  <tr>
+    <td rowspan="2" class="am-text-middle">$50</td>
+    <td>January</td>
+    <td>$100</td>
+  </tr>
+  <tr>
+    <td>February</td>
+    <td>$80</td>
+  </tr>
+</table>
+```
+
 ## 所有样式叠加
 
 `````html

diff --git a/less/table.less b/less/table.less
@@ -144,6 +144,7 @@ th {
 /* Bordered version */
 .@{ns}table-bordered {
   border: 1px solid @table-border-color;
+  border-left: none;
   .hook-table-bordered;
 
   > thead,
@@ -154,9 +155,10 @@ th {
       > td {
         border-left: 1px solid @table-border-color;
 
-        &:first-child {
+        // 避免有 rowspan 的时候后面的行没有左边框
+        /*&:first-child {
           border-left: none;
-        }
+        }*/
       }
     }
   }
@@ -278,6 +280,23 @@ th {
 }
 
 
+// Modifiers: centered
+// =============================================================================
+
+.@{ns}table-centered {
+  > thead,
+  > tbody,
+  > tfoot {
+    > tr {
+      > th,
+      > td {
+        text-align: center;
+      }
+    }
+  }
+}
+
+
 // Modifiers: states
 // =============================================================================