CSS 设置table中tbody的自定义滚动条

最新推荐文章于 2023-06-12 11:55:13 发布

原创最新推荐文章于 2023-06-12 11:55:13 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

_格鲁特宝宝原创，转载请务必注明出处

文章标签：

#css #自定义滚动条 #scroll #tbody滚动条

Web FrontEnd 同时被 2 个专栏收录

226 篇文章

订阅专栏

CSS

26 篇文章

订阅专栏

博客围绕自定义滚动条展开，涉及CSS相关技术，可实现如tbody滚动条的自定义效果，在前端页面设计中能提升用户体验，满足特定的视觉和交互需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>CSS教程</title>
	<style>
		/* 自定义滚动条 */
		.scroll{
		    overflow: auto;
		    float: left;
		}
		.scrollbar{
		    width: 30px;
		    height: 300px;
		    margin: 0 auto;
		}
		.scroll-1::-webkit-scrollbar {/*滚动条整体样式*/
		    width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
		    height: 1px;
		}
		.scroll-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
		    border-radius: 50px;
		    -webkit-box-shadow: inset 0 0 5px #18223E;
		    background: #535353;
		}
		.scroll-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
		    border-radius: 50px;
		    -webkit-box-shadow: inset 0 0 5px #101728;
		    background: #EDEDED;
		}
		table tbody {
			display:block;
			height:195px;
			overflow-y: auto;
		}

		table thead, tbody tr {
			display:table;
			width:100%;
			table-layout:fixed;
		}

		table thead {
			width: calc( 100% - 6px )
		}
		table thead th{ background:#ccc;}
	</style>
</head>

<body>
	<table width="80%" border="1">
		<thead>
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>出生年月</th>
				<th>手机号码</th>
				<th>单位</th>
			</tr>
		</thead>
		<tbody class="scroll scroll-1">
			<tr>
				<td>张三</td>
				<td>18</td>
				<td>1990-9-9</td>
				<td>13682299090</td>
				<td>阿里巴巴</td>
			</tr>
			<tr>
				<td>张三封</td>
				<td>18</td>
				<td>1990-9-9</td>
				<td>13682299090</td>
				<td>阿里巴巴与四十大盗</td>
			</tr>
			<tr>
				<td>张小三</td>
				<td>18</td>
				<td>1990-9-9</td>
				<td>13682299090</td>
				<td>腾讯科技</td>
			</tr>
			<tr>
				<td>张三</td>
				<td>18</td>
				<td>1990-9-9</td>
				<td>13682299090</td>
				<td>浏阳河就业</td>
			</tr>
			<tr>
				<td>张三疯子</td>
				<td>18</td>
				<td>1990-9-9</td>
				<td>13682299090</td>
				<td>阿里巴巴</td>
			</tr>
			<tr>
				<td>张三</td>
				<td>18</td>
				<td>1990-9-9</td>
				<td>13682299090</td>
				<td>阿里巴巴</td>
			</tr>
			<tr>
				<td>张大三</td>
				<td>18</td>
				<td>1990-9-9</td>
				<td>13682299090</td>
				<td>阿里巴巴</td>
			</tr>
			<tr>
				<td>张三五</td>
				<td>18</td>
				<td>1990-9-9</td>
				<td>13682299090</td>
				<td>阿里巴巴</td>
			</tr>
			<tr>
				<td>张刘三</td>
				<td>18</td>
				<td>1990-9-9</td>
				<td>13682299090</td>
				<td>阿里巴巴</td>
			</tr>
			<tr>
				<td>张三</td>
				<td>18</td>
				<td>1990-9-9</td>
				<td>13682299090</td>
				<td>阿里巴巴</td>
			</tr>
		</tbody>
	</table>
</body>
</html>