table设置表格有滚动条
2018-06-24 01:27:59来源:未知 阅读 ()
table 设置表格有滚动条。
少说多做,代码中有注释:
1 <!DOCTYPE HTML> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6 <title>设置表格有滚动条</title> 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 table { 14 /*设置相邻单元格的边框间的距离*/ 15 border-spacing: 0; 16 /*表格设置合并边框模型*/ 17 border-collapse: collapse; 18 text-align: center; 19 } 20 /*关键设置 tbody出现滚动条*/ 21 table tbody { 22 display: block; 23 height: 80px; 24 overflow-y: scroll; 25 } 26 27 table thead, 28 tbody tr { 29 display: table; 30 width: 100%; 31 table-layout: fixed; 32 } 33 /*关键设置:滚动条默认宽度是16px 将thead的宽度减16px*/ 34 table thead { 35 width: calc( 100% - 1em) 36 } 37 38 39 table thead th { 40 background: #ccc; 41 } 42 43 </style> 44 </head> 45 46 <body> 47 <table width="80%" border="1"> 48 <thead> 49 <tr> 50 <th>姓名</th> 51 <th>年龄</th> 52 <th>出生年月</th> 53 <th>手机号码</th> 54 <th>单位</th> 55 </tr> 56 </thead> 57 <tbody> 58 <tr> 59 <td>张三</td> 60 <td>18</td> 61 <td>1990-9-9</td> 62 <td>13682299090</td> 63 <td>阿里巴巴</td> 64 </tr> 65 <tr> 66 <td>李四</td> 67 <td>18</td> 68 <td>1990-9-9</td> 69 <td>13682299090</td> 70 <td>阿里巴巴与四十大盗</td> 71 </tr> 72 <tr> 73 <td>王五</td> 74 <td>18</td> 75 <td>1990-9-9</td> 76 <td>13682299090</td> 77 <td>腾讯科技</td> 78 </tr> 79 <tr> 80 <td>孟想</td> 81 <td>18</td> 82 <td>1990-9-9</td> 83 <td>13682299090</td> 84 <td>浏阳河就业</td> 85 </tr> 86 </tbody> 87 </table> 88 </body> 89 90 </html>
效果:
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash