【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>

现在得到的效果图：