Browse Source

add responsive-table (#3472)

陈帅 7 years ago
parent
commit
b095b0bc1d
2 changed files with 20 additions and 2 deletions
  1. 19 0
      src/global.less
  2. 1 2
      src/pages/List/TableList.js

+ 19 - 0
src/global.less

@@ -1,3 +1,5 @@
+@import '~antd/lib/style/themes/default.less';
+
 html,
 html,
 body,
 body,
 #root {
 #root {
@@ -31,3 +33,20 @@ ul,
 ol {
 ol {
   list-style: none;
   list-style: none;
 }
 }
+
+@media (max-width: @screen-xs) {
+  .ant-table {
+    width: 100%;
+    overflow-x: auto;
+    &-thead > tr,
+    &-tbody > tr {
+      > th,
+      > td {
+        white-space: pre;
+        > span {
+          display: block;
+        }
+      }
+    }
+  }
+}

+ 1 - 2
src/pages/List/TableList.js

@@ -301,7 +301,6 @@ class TableList extends PureComponent {
       title: '服务调用次数',
       title: '服务调用次数',
       dataIndex: 'callNo',
       dataIndex: 'callNo',
       sorter: true,
       sorter: true,
-      align: 'right',
       render: val => `${val} 万`,
       render: val => `${val} 万`,
       // mark to display a total number
       // mark to display a total number
       needTotal: true,
       needTotal: true,
@@ -598,7 +597,7 @@ class TableList extends PureComponent {
           </Col>
           </Col>
         </Row>
         </Row>
         <div style={{ overflow: 'hidden' }}>
         <div style={{ overflow: 'hidden' }}>
-          <div style={{ float: 'right', marginBottom: 24 }}>
+          <div style={{ marginBottom: 24 }}>
             <Button type="primary" htmlType="submit">
             <Button type="primary" htmlType="submit">
               查询
               查询
             </Button>
             </Button>