[分享]css做酷炫的表格滚动条

CSS 可以用于许多方面，除了美化网站和网页， 还可以美化表格，比如制作酷炫的表格滚动条。下面我们来学习一下如何使用 CSS 制作这样的滚动条。/ 设置表格容器的样式 / table { border...

CSS 可以用于许多方面，除了美化网站和网页， 还可以美化表格，比如制作酷炫的表格滚动条。下面我们来学习一下如何使用 CSS 制作这样的滚动条。

/* 设置表格容器的样式 */
table {  
    border-collapse: collapse;
    width: 100%;
    margin: auto;
}

/* 设置表格头部样式 */
thead tr th {  
    background-color: #333333;
    color: #FFFFFF;
    text-align: left;
    padding: 10px;
}

/* 设置表格内容样式 */
tbody tr {  
    background-color: #f5f5f5;
}

tbody td {  
    padding: 10px;
    text-align: left;
}

/* 设置滚动条的样式 */
tbody {
    overflow-y: auto; /* 设置垂直滚动条 */
    max-height: 200px; /* 设置最大高度，让滚动条出现 */
}

/* 隐藏默认的浏览器滚动条 */
::-webkit-scrollbar {  
    width: 6px;
    background-color: transparent;
}

/* 定义滚动条的样式 */
::-webkit-scrollbar-thumb {  
    background-color: #CCCCCC; /* 设置滚动条的颜色 */
    border-radius: 10px; /*设置滚动条圆角 */
}

::-webkit-scrollbar-thumb:hover {  
    background-color: #AAAAAA;
} 

通过上述 CSS 代码可以很容易地创建一个包含有表格和滚动条的容器。这个容器里面的表格可以自由滑动，容器宽度就是表格的宽度，而容器高度可以设置为合适的数值，超出该高度时就会出现垂直滚动条了。

同时，我们通过伪元素 `::-webkit-scrollbar-thumb` 和 `::-webkit-scrollbar-thumb:hover` 来设置滚动条的颜色、形状和鼠标悬停时的样式，让我们的滚动条变得更加酷炫。

当然，除了以上这些样式，我们还可以通过其他 CSS 属性继续美化我们的表格和滚动条，让页面更加美观、易读。