table设置隔行变色

要实现表格的隔行变色，可以利用CSS中的伪类选择器nth-child。具体代码可以如下：

table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}

这样就能够实现表格的隔行变色效果，奇数行显示浅灰色，偶数行显示白色。

相关问题

vxe-table隔行变色

vxe-table是一个基于Vue.js的强大的表格组件库，它提供了丰富的功能和灵活的配置选项。其中，隔行变色是vxe-table的一个常见需求，可以通过设置表格的奇偶行样式来实现。

在vxe-table中，可以通过设置表格的stripe属性来开启隔行变色效果。当stripe属性设置为true时，奇数行和偶数行会有不同的背景色，以便更好地区分行。

以下是设置vxe-table隔行变色的示例代码：

<template>
  <vxe-table :data="tableData" stripe>
    <!-- 表格列配置 -->
    <vxe-table-column type="index" title="序号"></vxe-table-column>
    <vxe-table-column field="name" title="姓名"></vxe-table-column>
    <vxe-table-column field="age" title="年龄"></vxe-table-column>
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 },
        { name: '赵六', age: 35 },
      ],
    };
  },
};
</script>

在上述代码中，通过设置`stripe`属性为`true`，即可实现vxe-table的隔行变色效果。同时，还可以根据实际需求进行其他样式的自定义配置。

el-table 隔行变色

要实现 el-table 隔行变色，你可以使用 el-table 的 stripe 属性。stripe 属性为 true 时，表格的行会隔行变色。你可以在 el-table 上添加 stripe 属性来实现隔行变色的效果。

示例代码如下：

<template>
  <el-table :data="tableData" stripe>
    <!-- 表格列定义 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, gender: '男' },
        { name: '李四', age: 20, gender: '女' },
        { name: '王五', age: 22, gender: '男' },
        // 更多数据...
      ]
    };
  }
};
</script>

在上面的示例代码中，通过在 el-table 上添加 stripe 属性，即可实现表格的隔行变色效果。同时，你需要将表格的数据传递给 el-table 的 data 属性。

这样就可以实现 el-table 的隔行变色了。希望能对你有帮助！如果还有其他问题，请随时提问。