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这个属性。

http://mp.weixin.qq.com/s?__biz=MzI1MTA2MDcyOQ==&mid=2649567133&idx=1&sn=122313fefb3573cf13e54196d1ad73f8#rd

display:block显示元素的时候，大部分针对的元素是 div 标签或者其他的块级元素

display:inline或者inline-block，一般作用于span等内联元素

display: table作用于table（解决今天遇到问题的方法）

display: table-cell作用于td或者th