今天遇到了一個(gè)問題，想給table加邊框麻顶，實(shí)現(xiàn)這樣一個(gè)效果：
HTML代碼
<table class="information">
<tr>
<th>考試科目：</th>
<th>數(shù)學(xué)</th>
<th>時(shí)間：</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>學(xué)號：</th>
<th>
<input type="text" class="ID">
</th>
<th>姓名：</th>
<th>
<input type="text" class="name">
</th>
</tr>
</table>
CSS代碼
一開始我想的很簡單，給tr加個(gè)邊框不就行了要尔，代碼如下
.information tr{
border: 1px solid #ccc;
}
但是發(fā)現(xiàn)沒用，原因是只有table匆帚，th和td有獨(dú)立的邊框吸重，tr是沒有邊框的。所以這個(gè)方法只能放棄啦嫉晶。
然后想到了那就給th加上邊框和下邊框，連起來應(yīng)該就是想要的效果椎镣，代碼如下
.information tr th{
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
但是出現(xiàn)了這樣的情況
這是因?yàn)閠h的邊框是默認(rèn)分開顯示的惊科，這里就需要提一個(gè)CSS屬性：
border-collapse 該屬性設(shè)置表格的邊框是否被合并為一個(gè)單一的邊框，還是像在標(biāo)準(zhǔn)的 HTML 中那樣分開顯示蜡娶。
這里我們把該屬性設(shè)置為separate，表示將表格的邊框合并為一個(gè)邊框。代碼如下：
.information{
border-collapse: separate;
border-spacing: 0px 20px; /*設(shè)置列澄阳、行間距*/
}
把這段CSS代碼加上就可以實(shí)現(xiàn)之前想要的效果啦~
