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

  • Post author:
  • Post category:其他


今天遇到了一个问题,想给table加边框,实现这样一个效果:

de410c8ea3be

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;

}

但是出现了这样的情况

de410c8ea3be

这是因为th的边框是默认分开显示的,这里就需要提一个CSS属性:

border-collapse 该属性设置表格的边框是否被合并为一个单一的边框,还是像在标准的 HTML 中那样分开显示。

这里我们把该属性设置为separate,表示将表格的边框合并为一个边框。代码如下:

.information{

border-collapse: separate;

border-spacing: 0px 20px; /*设置列、行间距*/

}

把这段CSS代码加上就可以实现之前想要的效果啦~