欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > HTML >
  思路就是
 
  1,把tbody设置成display:block,然后就对其高度设置一个固定值,overflow设置成auto。
 
  2,把thead的tr设置成display:block。
 
  3,因为都设置成block所以要给td手动添加宽度 width:200px
 
  代码如下:
 
  代码如下:
 
  <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%;
 
  }

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h59638.shtml

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-08-14 17:37 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。