现在前端框架满天飞，bootstrap，mdui，meiziUI,element等等框架，使用框架自带的table类基本三二分钟就搞定一个自适应的table表格，但是实现的方案，大家了解吗 久伴在一次…
现在前端框架满天飞，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>
这种表格看起来就很别扭，想当然不是大家喜欢的吧
自适应表格
在线预览
[link href=http://demo.jiubx.com/table/table.html]在线预览[/link]
<!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>
