今天遇到了一个问题，想给table加边框，实现这样一个效果：
HTML代码
<table class="information">
<tr>
<th>考试科目：</th>
<th>数学</th>
<th>时间：</th>
<th>120分钟</th>
<th>得分：</th>
<th><input type="text" class="score"></th>
</tr>
<tr>
<th>班级：</th>
<th>
<input type="text" class="className">
</th>
<th>学号：</th>
<th>
<input type="text" class="ID">
</th>
<th>姓名：</th>
<th>
<input type="text" class="name">
</th>
</tr>
</table>
CSS代码
一开始我想的很简单，给tr加个边框不就行了，代码如下
.information tr{
border: 1px solid #ccc;
}
但是发现没用，原因是只有table，th和td有独立的边框，tr是没有边框的。所以这个方法只能放弃啦。
然后想到了那就给th加上边框和下边框，连起来应该就是想要的效果，代码如下
.information tr th{
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
但是出现了这样的情况
这是因为th的边框是默认分开显示的，这里就需要提一个CSS属性：
border-collapse 该属性设置表格的边框是否被合并为一个单一的边框，还是像在标准的 HTML 中那样分开显示。
这里我们把该属性设置为separate，表示将表格的边框合并为一个边框。代码如下：
.information{
border-collapse: separate;
border-spacing: 0px 20px; /*设置列、行间距*/
}
把这段CSS代码加上就可以实现之前想要的效果啦~
