纯css写table切换代码,要包含选中样式设置
时间: 2024-09-17 14:02:35 浏览: 68
jQuery Table点击选中表格行变色代码.zip
纯CSS实现表格(table)的切换显示效果通常涉及到使用`:hover`伪类和一些组合选择器。你可以创建一个基础的表格,并通过添加一个可切换的类来控制行的可见性。当鼠标悬停在某一行上时,该行会显示;移开后则隐藏。下面是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.table-switcher {
display: none;
}
.table-switcher:hover tr:nth-child(n+2) {
display: table-row;
}
.table-switcher tbody tr:hover {
background-color: lightgray; /* 鼠标悬停时选中样式的背景色 */
}
/* 可选:给默认状态下的第一行设定特定样式 */
.table-switcher tbody tr:first-child {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<table class="table-switcher">
<thead>
<tr>
<th>列1</th>
<th>列2</th>
</tr>
</thead>
<tbody>
<tr><td>行1</td><td>内容1</td></tr>
<tr><td>行2</td><td>内容2</td></tr>
<!-- 更多行... -->
</tbody>
</table>
</body>
</html>
```
在这个例子中,`.table-switcher`类隐藏了所有但第一行的内容,当你鼠标悬浮在表格上时,除了第一行外,其他行就会显示出来。同时,我们还设置了选中样式的背景颜色。
阅读全文