在静态页面中添加一个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:;padding:;}
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