css Table奇数行hover

要在 CSS 表格的奇数行上应用 hover 效果，你可以使用 `:nth-child` 选择器来选择奇数行，并为其设置 hover 样式。下面是一个示例：

<style>
table {
  width: 100%;
  border-collapse: collapse;
}

tr:nth-child(odd) {
  background-color: #f2f2f2; /* 设置奇数行的背景颜色 */
}

tr:hover {
  background-color: #ddd; /* 设置 hover 效果的背景颜色 */
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
</style>

<table>
＊＊＊

相关问题

antdesignvue1.7 css如何修改table样式

在 Ant Design Vue 1.7 中，Table 组件的样式可以通过 CSS 进行修改。以下是一个示例：

<template>
  <a-table :columns="columns" :data-source="data" class="custom-table" />
</template>

<style>
.custom-table {
  /* 修改表格边框样式 */
  border: 1px solid #ddd;

  /* 修改表头背景色和字体颜色 */
  .ant-table-thead > tr > th {
    background-color: #fafafa;
    color: #333;
  }

  /* 修改表格单元格背景色和字体颜色 */
  .ant-table-tbody > tr > td {
    background-color: #fff;
    color: #666;
  }

  /* 修改表格奇数行背景色 */
  .ant-table-tbody > tr:nth-child(odd) > td {
    background-color: #f5f5f5;
  }

  /* 修改表格鼠标悬停背景色 */
  .ant-table-row:hover > td {
    background-color: #e6f7ff;
  }
}
</style>

在上面的示例中，我们通过 `.custom-table` 类选择器来修改表格的样式。我们可以通过 CSS 修改表格的边框样式、表头和表格单元格的背景色和字体颜色、表格奇数行的背景色以及鼠标悬停时的背景色。

使用jquery完成一个动态的斑马条纹表格:加载后奇数行底色为红色,当鼠标进入表格时

要使用jQuery完成一个动态的斑马条纹表格，可以按照以下步骤进行操作。首先，我们需要编写一个HTML表格，然后使用jQuery来为奇数行添加特定的样式。

HTML部分可以先创建一个基本的表格结构，例如：

<table id="zebra-table">
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
    <td>数据3</td>
  </tr>
  <tr>
    <td>数据4</td>
    <td>数据5</td>
    <td>数据6</td>
  </tr>
  <!-- 其他行... -->
</table>

然后，使用jQuery来给奇数行添加红色背景样式，并且当鼠标进入表格时，表格行背景色变化。jQuery部分的代码如下所示：

$(document).ready(function(){
  // 给奇数行添加红色背景
  $('#zebra-table tr:odd').addClass('odd-row');

  // 鼠标进入表格时，表格行背景色变化
  $('#zebra-table tr').hover(
    function(){
      $(this).addClass('hover-row');
    },
    function(){
      $(this).removeClass('hover-row');
    }
  );
});

最后，我们还需要为奇数行和鼠标悬停效果定义对应的CSS样式：

.odd-row {
  background-color: red;
}

.hover-row {
  background-color: #f2f2f2;
}

以上便是使用jQuery完成一个动态的斑马条纹表格的方法。通过以上步骤，加载后奇数行的底色将会变为红色，并且当鼠标进入表格时，表格行的背景色也会发生变化。