table表格怎么样添加滚动条

把table外面套一个div，然后设置div的overflow height widthstyle="overflow: autoheight: 150pxwidth: 150px"

1.<!--div比table大小要小才会显示-->

2.<div style="overflow-x: auto overflow-y: auto height: 100px width:200px">

3.   <table id="table" border="1" align="center" width="300px" height="200px">

4. <tbody>

5.  <tr><td>00</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td></tr>

6.  <tr><td>10</td><td>11</td><td>12</td><td>13</td><td>15</td><td>15</td></tr>

7.  <tr><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>

8.  <tr><td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr>

9. </tbody>

10.</table>

11. </body>

12. </div>

初步开启react

一、Table

<Table

    columns={columns}  // 头部每一项  

    dataSource={data.list} // 渲染的list

    rowKey={columns =>columns.serialNumber}  // 需要通过rowKey给table循环提供一个唯一key，取List里的唯一字段均可

    bordered

    scroll={{x:4000}}  // 表头数据特别多时添加滚动条

    pagination={{  // 根据ant中pagination组件可以添加相应的参数,此处只简单进行处理

        showSizeChanger: true,   // 分页

        showQuickJumper: true,  // 跳到指定页

        showTotal: (count=data.total)=>{  // 显示总数

            return '共'+count+'条数据'

       },

        pageSizeOptions:['5','10','15','20']  // 每页显示多少条数据数组选项

    }}

/>

第一次写react项目，一个简单的table渲染让我觉得相对于angular、vue，react的写法更加“与众不同”，需要时间适应，相信不久就可以适应，记录一下最初的感受，等来日熟练掌握时再来回顾一下最开始的心情。

---