用CSS伪类让表格更智能
做网页时，表格不只是放数据的工具。加点CSS伪类，能让它自己“变颜色”、“换行高亮”，甚至在鼠标经过时自动调整样式，完全不用写JavaScript。
比如你在后台管理系统里看订单列表，每行数据密密麻麻，眼睛都看花了。这时候如果能让鼠标经过的那行变个背景色，是不是一下子就知道自己在看哪条？
<style>
tr:hover {
background-color: #f0f8ff;
}
</style>
<table>
<tr><td>订单1</td><td>已发货</td></tr>
<tr><td>订单2</td><td>待付款</td></tr>
<tr><td>订单3</td><td>已签收</td></tr>
</table>上面这个 :hover 就是最常用的伪类之一，专门响应用户的悬停动作。
隔行换色，阅读不累眼
数据一多，全挤在一起看着头疼。来个 :nth-child(odd) 给奇数行加个浅灰底，立马清爽不少。
<style>
tr:nth-child(odd) {
background-color: #f9f9f9;
}
</style>要是想从第二行开始交替，把 odd 换成 2n+2 也行，灵活得很。
表头固定，滚动也不丢
长表格往下拉，表头看不见了？配合 :first-child 把第一行锁住，滑动时它一直顶在上面。
<style>
thead tr:first-child {
position: sticky;
top: 0;
background: white;
z-index: 10;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
</style>别忘了给 thead 包一层，这样才生效。
最后一行特殊处理
表格底部要加个总计行，想让它突出一点？:last-child 来帮忙。
<style>
tr:last-child {
font-weight: bold;
color: #d32f2f;
border-top: 2px solid #d32f2f;
}
</style>这样一设，不管数据怎么变，最后一行永远自带“C位光环”。
鼠标选中某行时复制更方便
有时候用户要复制整行内容，加个 :active 提示当前点击的行，体验会更好。
<style>
tr:active {
background-color: #ffe0b2 !important;
}
</style>虽然不如 :hover 常用，但在需要交互反馈的场景里挺管用。
这些小技巧看起来简单，但用在实际项目里，真的能让人觉得这页面“做得挺细”。别再只靠JS实现交互了，CSS伪类也能扛事儿。