css Table奇数行hover
时间: 2024-01-04 16:29:49 浏览: 33
要在 CSS 表格的奇数行上应用 hover 效果,你可以使用 `:nth-child` 选择器来选择奇数行,并为其设置 hover 样式。下面是一个示例:
```html
<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 进行修改。以下是一个示例:
```html
<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部分可以先创建一个基本的表格结构,例如:
```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部分的代码如下所示:
```javascript
$(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样式:
```css
.odd-row {
background-color: red;
}
.hover-row {
background-color: #f2f2f2;
}
```
以上便是使用jQuery完成一个动态的斑马条纹表格的方法。通过以上步骤,加载后奇数行的底色将会变为红色,并且当鼠标进入表格时,表格行的背景色也会发生变化。