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

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

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

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>

文档链接 https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Advanced_styling_effects