table使用display:block时会多出一条边框
在静态页面中添加一个table，然后设置table的显示隐藏，当使用display:block显示table时出现了如下情况，详情请点击链接：
http://jsbin.com/pinovorahu/edit?html,css,output
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <table border="1" class="total"> <thead> <tr> <th>姓名</th> <th>受理故障数</th> <th>解决问题总数</th> <th>故障解决率</th> <th>平均解决历时</th> <th>积分</th> </tr> </thead> <tbody> <tr> <td>顺滔滔</td> <td>5</td> <td>5</td> <td>50%</td> <td>3小时</td> <td>10 points</td> </tr> <tr> <td>顺滔滔</td> <td>5</td> <td>5</td> <td>50%</td> <td>3小时</td> <td>10 points</td> </tr> </tbody> </table> </body> </html>
body,html,table,thead,tbody,tr,td,th{margin:0;padding:0;} table{border-collapse: collapse;margin:10px auto 30px;max-width:1000px;} .total{display:block;}
效果如下图：
在志爷（公众号:闲谈CSS那些事儿）的帮助下重新深入的了解了display:block这个属性。
display:block显示元素的时候，大部分针对的元素是 div 标签或者其他的块级元素
display:inline或者inline-block，一般作用于span等内联元素
display: table作用于table（解决今天遇到问题的方法）
display: table-cell作用于td或者th
