现在前端框架满天飞,bootstrap,mdui,meiziUI,element等等框架,使用框架自带的table类基本三二分钟就搞定一个自适应的table表格,但是实现的方案,大家了解吗
久伴在一次项目实战中,需要一个table表格,虽然没要求要自适应,但是热爱前端的久伴是个完美主义者,table当然要自适应才舒服
基本表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table自适应表格</title> </head> <body> <table> <caption>我是表格标题</caption> <!--表头--> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>出生年月</th> </tr> </thead> <!--表内容--> <tbody> <tr> <td>久伴</td> <td>24</td> <td>男</td> <td>1996年8月22日</td> </tr> </tbody> </table> </body> </html>
这种表格看起来就很别扭,想当然不是大家喜欢的吧
自适应表格
在线预览
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table自适应表格</title> <style> table { width: 100%; text-align: center; border-spacing: 0;/**设置相邻单元格的边框间的距离**/ border-collapse: collapse;/**边框会合并为一个单一的边框**/ color:#5a5a5a; table-layout: fixed;/**固定table表格**/ } table thead { background-color: #d9edf7; } table td,table th{ border:1px solid #ccc; overflow: hidden;/**溢出隐藏**/ white-space: nowrap;/**不换行**/ text-overflow: ellipsis;/**溢出不可见部分使用...代替**/ } </style> </head> <body> <table> <caption>我是表格标题</caption> <!--表头--> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>出生年月</th> </tr> </thead> <!--表内容--> <tbody> <tr> <td>久伴</td> <td>24</td> <td>男</td> <td>1996年8月22日</td> </tr> </tbody> </table> </body> </html>
2020年4月24日 下午4:54 1F
日常互访