用css 给tbody加垂直滚动条

来源：互联网发布：python分布式框架编辑：程序博客网时间：2024/05/16 19:26

思路就是

1，把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto。

2，把thead的tr设置成display:block。

3，因为都设置成block所以要给td手动添加宽度 width:200px

代码如下：

<table class="table">                          <thead>                              <tr>                                  <th>Id</th>                                  <th>Name</th>                                  <th>Category</th>                                  <th>MonthAmount</th>                                  <th>hasBackUp</th>                                  <th>score</th>                              </tr>                          </thead>                          <tbody>                              <tr>                                  <td>23</td>                                  <td>South Bearing</td>                                  <td>Glass/Material</td>                                  <td>1234444</td>                                  <td>TRUE</td>                                  <td>3456.00</td>                              </tr>                              <tr>                                  <td>23</td>                                  <td>South Bearing</td>                                  <td>Glass/Material</td>                                  <td>1234444</td>                                  <td>TRUE</td>                                  <td>3456.00</td>                              </tr>                              <tr>                                  <td>23</td>                                  <td>South Bearing</td>                                  <td>Glass/Material</td>                                  <td>1234444</td>                                  <td>TRUE</td>                                  <td>3456.00</td>                              </tr>                              <tr>                                  <td>23</td>                                  <td>South Bearing</td>                                  <td>Glass/Material</td>                                  <td>1234444</td>                                  <td>TRUE</td>                                  <td>3456.00</td>                              </tr>                              <tr>                                  <td>23</td>                                  <td>South Bearing</td>                                  <td>Glass/Material</td>                                  <td>1234444</td>                                  <td>TRUE</td>                                  <td>3456.00</td>                              </tr>                              <tr>                                  <td>23</td>                                  <td>South Bearing</td>                                  <td>Glass/Material</td>                                  <td>1234444</td>                                  <td>TRUE</td>                                  <td>3456.00</td>                              </tr>                              <tr>                                  <td>23</td>                                  <td>South Bearing</td>                                  <td>Glass/Material</td>                                  <td>1234444</td>                                  <td>TRUE</td>                                  <td>3456.00</td>                              </tr>                              <tr>                                  <td>23</td>                                  <td>South Bearing</td>                                  <td>Glass/Material</td>                                  <td>1234444</td>                                  <td>TRUE</td>                                  <td>3456.00</td>                              </tr>                              <tr>                                  <td>23</td>                                  <td>South Bearing</td>                                  <td>Glass/Material</td>                                  <td>1234444</td>                                  <td>TRUE</td>                                  <td>3456.00</td>                              </tr>                              <tr>                                  <td>23</td>                                  <td>South Bearing</td>                                  <td>Glass/Material</td>                                  <td>1234444</td>                                  <td>TRUE</td>                                  <td>3456.00</td>                              </tr>                              <tr>                                  <td>23</td>                                  <td>South Bearing</td>                                  <td>Glass/Material</td>                                  <td>1234444</td>                                  <td>TRUE</td>                                  <td>3456.00</td>                              </tr>                                                        </tbody>                      </table>

css

.table thead tr {display:block;}.table tbody {display: block;height: 200px;overflow: auto;}.table th {width:20%;} .table td {    width:20%; }

0 0