今天遇到了一个问题，想给table加边框，实现这样一个效果：
HTML代码
| 考试科目： | 数学 | 时间： | 120分钟 | 得分： | |
|---|---|---|---|---|---|
| 班级： | 学号： | 姓名： |
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代码加上就可以实现之前想要的效果啦~