原生table实现奇数和偶数的样式不一样

最新推荐文章于 2024-08-13 11:12:51 发布

乐容

最新推荐文章于 2024-08-13 11:12:51 发布

阅读量285

点赞数 5

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_61265297/article/details/137471267

版权

<table class="t">
      <thead>
        <tr style="height: 0.375rem">
          <th style="width: 100px" class="a">院区名称</th>
          <th style="width: 100px" class="a">设备名称</th>
          <th style="width: 100px" class="a">维修次数</th>
        </tr>
      </thead>
      <tr v-for="(item, index) in devTypes" :key="index">
          <td>{{ item.name }}</td> <td>{{ item.age }}</td> <td>{{ item.id }}</td>
      </tr>

  </table>


定义数据

      devTypes:[
        {id:'1',name:'小李',age:'10'},
        {id:'2',name:'小李1',age:'10'},
        {id:'3',name:'小李3',age:'12'},
        {id:'4',name:'小李4',age:'12'},
      ],






css部分

  .t tr:nth-child(odd) {
                background-color: blue;
                color: white;
            }
            
            /*  偶数行样式 */
            .t tr:nth-child(even) {
                background-color: red;
                color: yellow;
            }