table上下对齐滚动条设置

说明

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

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

代码



	<head>
		<title>tabletitle>
		<style>
			table tbody {
      
			display:block;
			height:195px;
			overflow-y:scroll;
			}
			
			table thead, tbody tr {
      
			display:table;
			width:100%;
			table-layout:fixed;
			}

			table thead {
      
			width: calc( 100% - 4px) /*为了上下对齐 减去滚动条宽度 未设置滚动条宽度时减去 1em*/
			}
			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>测试1td><td>1td>tr>
		<tr><td>测试2td><td>2td>tr>
		<tr><td>测试3td><td>3td>tr>
		<tr><td>测试4td><td>4td>tr>
		<tr><td>测试5td><td>5td>tr>
		<tr><td>测试6td><td>6td>tr>
		<tr><td>测试7td><td>7td>tr>
		<tr><td>测试8td><td>8td>tr>
		<tr><td>测试9td><td>9td>tr>
		<tr><td>测试10td><td>10td>tr>
		<tr><td>测试11td><td>11td>tr>
		<tr><td>测试12td><td>12td>tr>
		tbody>
		table>
	div>
	body>
html>

你可能感兴趣的:(个人整理-html,html,css)