当前位置: 首页 > 工具软件 > Table Resizer > 使用案例 >

css 滚动条样式和table

龚睿
2023-12-01

1.滚动条美化

::-webkit-scrollbar {}   //滚动条整体部分     

::-webkit-scrollbar-track{}  //滚动条滑轨  

::-webkit-scrollbar-track-piece{}  //内层轨道,滚动条中间部分

::-webkit-scrollbar-thumb {}  //滚动条滑块

::-webkit-scrollbar-button{}  //滑轨两头的监听按钮

::-webkit-scrollbar-button:start {}  // 滑轨顶部的监听按钮

::-webkit-scrollbar-button:end {}    //滑轨底部的监听按钮

::-webkit-scrollbar-corner {}    //横向滚动条和纵向滚动条相交处的尖角

::-webkit-resizer{}  //两个滚动条的交汇处上用于通过拖动调整元素大小的小控件


// 还可设置鼠标移动上去时的变化
::-webkit-scrollbar-track:hover {}       

::-webkit-scrollbar-thumb:hover {}

::-webkit-scrollbar-button:start:hover {} 

::-webkit-scrollbar-button:end:hover {} 

2.table 斑马线

.table tr:nth-child(odd){   
  background:#333;   
  color:#fff;   
}   

.table tr:nth-child(even){   
  background:#d9d9d9;   
}

 类似资料: