原生表格加滚动条 有点技术含量
设置原始表格有滚动条
姓名 | 年龄 | 出生年月 | 手机号码 | 单位 |
---|---|---|---|---|
李四 | 39 | yyy | 167777272 | 百度 |
李四 | 39 | yyy | 167777272 | 百度 |
李四 | 39 | yyy | 167777272 | 百度 |
李四 | 39 | yyy | 167777272 | 百度 |
李四 | 39 | yyy | 167777272 | 百度 |
李四 | 39 | yyy | 167777272 | 百度 |
李四 | 39 | yyy | 167777272 | 百度 |
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>设置原始表格有滚动条</title> <style> * { margin: 0; padding: 0; } table { /*设置相邻单元格的边框间的距离*/ border-spacing: 0; /*表格设置合并边框模型*/ border-collapse: collapse; text-align: center; } /*关键设置 tbody出现滚动条*/ table tbody { display: block; height: 80px; overflow-y: scroll; } table thead, tbody tr { display: table; width: 100%; table-layout: fixed; } /*关键设置:滚动条默认宽度是16px 将thead的宽度减16px*/ table thead { width: calc(100% - 1em) } table thead th { background: #ccc; } </style> </head> <body> <table width="80%" border="1"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>出生年月</th> <th>手机号码</th> <th>单位</th> </tr> </thead> <tbody> <tr> <td>李四</td> <td>39</td> <td>yyy</td> <td>167777272</td> <td>百度</td> </tr> <tr> <td>李四</td> <td>39</td> <td>yyy</td> <td>167777272</td> <td>百度</td> </tr> <tr> <td>李四</td> <td>39</td> <td>yyy</td> <td>167777272</td> <td>百度</td> </tr> <tr> <td>李四</td> <td>39</td> <td>yyy</td> <td>167777272</td> <td>百度</td> </tr> <tr> <td>李四</td> <td>39</td> <td>yyy</td> <td>167777272</td> <td>百度</td> </tr> <tr> <td>李四</td> <td>39</td> <td>yyy</td> <td>167777272</td> <td>百度</td> </tr> <tr> <td>李四</td> <td>39</td> <td>yyy</td> <td>167777272</td> <td>百度</td> </tr> </tbody> </table> </body> </html>