CSS 设置tr的边框

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