table上下对齐滚动条设置

最新推荐文章于 2022-07-28 11:59:53 发布

rookie2016

最新推荐文章于 2022-07-28 11:59:53 发布

阅读量772

点赞数

分类专栏：个人整理-html 文章标签： html css

本文链接：https://blog.csdn.net/zhangwenhuad/article/details/112024968

版权

个人整理-html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

说明

手写的table，设置滚动条时，只设置滚动效果，上下表格对齐，滚动条样式调整

表格对齐关键点：table-layout
w3school详细说明

代码

<!DOCTYPE>
<html>
	<head>
		<title>table</title>
		<style>
			table tbody {
			display:block;
			max-height:195px; /*最大高度 超过这个高度后出现滚动条*/
        	overflow-y:auto;
			}
			
			table thead, tbody tr {
			display:table;
			width:100%;
			table-layout:fixed;
			}

			table thead {
			width: calc( 100% - 4px) /*为了上下对齐 减去滚动条宽度 未设置滚动条宽度时减去 1rem*/
			}
			table thead th{ background:#ccc;}
			table td{
				text-align:center
			}
			table tbody::-webkit-scrollbar {/*滚动条整体样式*/
				width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
				height: 4px;
				background-color:red;/*滚动槽颜色*/
			  }
			 table tbody::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
				border-radius: 5px;
				-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
				background-color:blue;/*滚动条颜色*/
			  }

			  table tbody::-webkit-scrollbar-track {/*滚动条里面轨道*/
				-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
				border-radius: 0;
				background: rgba(0,0,0,0.1);
			  }
			 
		</style>
	</head>
	<body>
	<div>
	<table width="50%" border="1" cellspacing="0" cellpadding="0" style="margin: auto;">
		<thead>
		<tr>
		<th>姓名</th>
		<th>年龄</th>
		</tr>
		</thead>
		<tbody>
		<tr><td>测试1</td><td>1</td></tr>
		<tr><td>测试2</td><td>2</td></tr>
		<tr><td>测试3</td><td>3</td></tr>
		<tr><td>测试4</td><td>4</td></tr>
		<tr><td>测试5</td><td>5</td></tr>
		<tr><td>测试6</td><td>6</td></tr>
		<tr><td>测试7</td><td>7</td></tr>
		<tr><td>测试8</td><td>8</td></tr>
		<tr><td>测试9</td><td>9</td></tr>
		<tr><td>测试10</td><td>10</td></tr>
		<tr><td>测试11</td><td>11</td></tr>
		<tr><td>测试12</td><td>12</td></tr>
		</tbody>
		</table>
	</div>
	</body>
</html>

rookie2016

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
table上下对齐滚动条设置

说明手写的table，设置滚动条时，只设置滚动效果，上下表格对齐，滚动条样式调整表格对齐关键点：table-layoutw3school详细说明代码<!DOCTYPE><html> <head> <title>table</title> <style> table tbody { display:block; height:195px; overflow-y:scroll; }
复制链接

扫一扫

专栏目录