CSS表格格式化：border-collapse属性的应用

CSS表格格式化：border-collapse属性的应用

引用

CSDN

1.

https://blog.csdn.net/lixin5456985/article/details/143537269

我们要完成的表格如下图所示。完成这个任务有许多方法，但是建议使用和向导中所用的相似的模式来完成以下的事情。

• 把标题和包含数字的列数据右对齐
• 把标题和包含文本的列数据左对齐
• 添加顶部和底部边框，以及页脚上方的边框
• 将主表的所有奇数行条纹化

CSS代码

table {
    border-collapse: collapse;
    font-size: 75%;
}
thead th:nth-child(2),
thead th:nth-child(3),
tbody td:nth-child(2),
tbody td:nth-child(3),
tfoot :first-child{
text-align:right;
}
thead th:nth-child(1),
thead th:nth-child(4),
tbody td:nth-child(1),
tbody td:nth-child(4),
tfoot :last-child{
text-align:left;
}
thead {
border-top: solid 1px #c0c0c0;
}
tfoot {
border-bottom:solid 1px #c0c0c0;
border-top: solid 1px #c0c0c0;
}
tbody tr:nth-child(odd) {
background-color: #c0c0c0;
}  

注意事项

border-collapse: collapse;是关键,不添加thead和tfoot中的boder属性不生效.

HTML代码

<table>  
<caption>A summary of the UK's most famous punk bands</caption>  
<thead>  
<tr>  
<th scope="col">Band</th>  
<th scope="col">Year formed</th>  
<th scope="col">No. of Albums</th>  
<th scope="col">Most famous song</th>  
</tr>  
</thead>  
<tbody>  
<tr>  
<th scope="row">Buzzcocks</th>  
<td>1976</td>  
<td>9</td>  
<td>Ever fallen in love (with someone you shouldn't've)</td>  
</tr>  
<tr>  
<th scope="row">The Clash</th>  
<td>1976</td>  
<td>6</td>  
<td>London Calling</td>  
</tr>  
<tr>  
<th scope="row">The Damned</th>  
<td>1976</td>  
<td>10</td>  
<td>Smash it up</td>  
</tr>  
<tr>  
<th scope="row">Sex Pistols</th>  
<td>1975</td>  
<td>1</td>  
<td>Anarchy in the UK</td>  
</tr>  
<tr>  
<th scope="row">Sham 69</th>  
<td>1976</td>  
<td>13</td>  
<td>If the kids are united</td>  
</tr>  
<tr>  
<th scope="row">Siouxsie and the Banshees</th>  
<td>1976</td>  
<td>11</td>  
<td>Hong Kong Garden</td>  
</tr>  
<tr>  
<th scope="row">Stiff Little Fingers</th>  
<td>1977</td>  
<td>10</td>  
<td>Suspect Device</td>  
</tr>  
<tr>  
<th scope="row">The Stranglers</th>  
<td>1974</td>  
<td>17</td>  
<td>No More Heroes</td>  
</tr>  
</tbody>  
<tfoot>  
<tr>  
<th scope="row" colspan="2">Total albums</th>  
<td colspan="2">77</td>  
</tr>  
</tfoot>  
</table>  

参考文档

MDN Web Docs - Advanced styling effects