实现数据展示表格的隔行变色,并且对含有文本“王五”的数据行高亮显示
时间: 2024-02-23 15:00:30 浏览: 160
实现表格的隔行变色
您可以使用CSS来实现表格的隔行变色和行高亮显示。以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>表格样式</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>男</td>
</tr>
<tr>
<td>赵六</td>
<td>35</td>
<td>女</td>
</tr>
<tr class="highlight">
<td>王五</td>
<td>28</td>
<td>男</td>
</tr>
<tr>
<td>孙七</td>
<td>20</td>
<td>女</td>
</tr>
</tbody>
</table>
</body>
</html>
```
在上面的代码中,我们使用了 `tr:nth-child(even)` CSS选择器来为表格的偶数行设置背景颜色,使用了 `.highlight` CSS类来高亮显示包含“王五”的行。您可以根据需要修改选择器和类名来实现您的需求。
阅读全文