纯 css 表格选中效果

pojin (ID: 2)

等级：风云使者

积分：299
发帖：2 篇
来自：保密
注册：2022/3/30 11:42:27
造访：2024/10/17 20:22:05

[ 第 1 楼 ]

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
:root {
  --hover: transparent;
  --row-hover: transparent;
}
html, body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro,sans-serif;
  font-weight: normal;
}
body {
  display: grid;
  place-content: center;
  font-family: ;
}
td, th {
  text-align: right;
  padding: 0.5em 1em;
}
th {
  white-space: normal;
  vertical-align: bottom;
  max-width: 90px;
  word-wrap: break-word;
}
body:has([name="rowHover"]:checked) tbody tr:hover {
  --hover: hsla(240, 95%, 80%, 1);
  --row-hover: hsla(50, 95%, 60%, 1);
}
body:has([name="columnHover"]:checked) {
  --hover: hsla(50, 95%, 60%, 1);
}
tr:hover {
  background: var(--row-hover);
}
table:has(td:nth-child(1):hover, th:nth-child(1):hover) {
  & th:nth-child(1),
  & tbody td:nth-child(1) {
    background: var(--hover);
  }
}
table:has(td:nth-child(2):hover, th:nth-child(2):hover) {
  & th:nth-child(2),
  & tbody td:nth-child(2) {
    background: var(--hover);
  }
}
table:has(td:nth-child(3):hover, th:nth-child(3):hover) {
  & th:nth-child(3),
  & tbody td:nth-child(3) {
    background: var(--hover);
  }
}
table:has(td:nth-child(4):hover, th:nth-child(4):hover) {
  & th:nth-child(4),
  & tbody td:nth-child(4) {
    background: var(--hover);
  }
}
table:has(td:nth-child(5):hover, th:nth-child(5):hover) {
  & th:nth-child(5),
  & tbody td:nth-child(5) {
    background: var(--hover);
  }
}
table:has(td:nth-child(6):hover, th:nth-child(6):hover) {
  & th:nth-child(6),
  & tbody td:nth-child(6) {
    background: var(--hover);
  }
}
.settings {
  width: 100vw;
  position: fixed;
  top: 0;
  text-align: center;
  font-size: 100%;
  background: #eee;
  padding-bottom: 1em;
}
</style>
</head>
<body>
<div class="settings">
    <label>行鼠标悬停效果: <input type="checkbox" name="rowHover" /></label>
    <label>列鼠标悬停效果: <input type="checkbox" name="columnHover" checked /></label>
</div>
<div>
    <table class="columnHover">
	<thead>
	    <tr>
		<th>字段1</th>
		<th>字段2</th>
		<th>字段3</th>
		<th>字段4</th>
		<th>字段5</th>
		<th>字段6</th>
	    </tr>
	</thead>
	<tbody>
	    <tr>
		<td>111</td>
		<td>111</td>
		<td>111</td>
		<td>111</td>
		<td>111</td>
		<td>111</td>
	    </tr>
	    <tr>
		<td>222</td>
		<td>222</td>
		<td>222</td>
		<td>222</td>
		<td>222</td>
		<td>222</td>
	    </tr>
	    <tr>
		<td>333</td>
		<td>333</td>
		<td>333</td>
		<td>333</td>
		<td>333</td>
		<td>333</td>
	    </tr>
	    <tfoot><tr><td colspan="6"><small>表格底部</small></td></tr></tfoot>
	</tbody>
    </table>
</div>
</body>
</html>

[您可以先修改代码再运行]

2024/8/7 19:30:10

IP：已设置保密