html tr隐藏 边框存在,CSS 设置tr的边框

今天遇到了一个问题，想给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代码加上就可以实现之前想要的效果啦~