css格式化一个表格之border-collapse: collapse的使用

原创已于 2024-11-06 01:25:37 修改 · 1.4k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2024-11-06 00:42:22 首次发布

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

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

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>