【css】原生table制作奇偶行不同背景色表格，取消td单元格自带单线

需求：制作奇偶行不同背景色的表格

解决问题及实现步骤：

1.表头背景色：

实现：在thead/tr/里面设置每个td的背景色

<table>
    <thead>
        <tr>
            <td v-for="item in tHeadList" :key="item.key" class=""thead-container">
                {{ item.value }}
            </td>
        </tr>
    </thead>
</table>
 
 
// css
.thead-container {
    background-color: #f2f2f2;
}复制

2.需要将thead的背景色完全满铺，不要留单元格自带的白痕

实现： 

<table style="border-collapse: collapse"></table>复制

现在得到的效果图：

最终实现的效果图：

3.奇偶行不同背景色

实现：在tbody的tr标签添加"tbody-container"类名

  .tbody-container:nth-of-type(odd) { // 奇数行
    background-color: #fff;
  }
  .tbody-container:nth-of-type(even) { // 偶数行
    background-color: #f2f2f2;;
  }复制

4.整个表格平铺在包裹的div里面

实现：table标签设置width: 100%

5.表格单元格插入img对齐

实现：

td {
    img {
        width: 35px;
        height: 35px;
        text-align: center;
        vertical-align: middle;
      }
}复制