table上下對齊滾動條設定

rookie2016發表於2020-12-31

說明

手寫的table，設定滾動條時，只設定滾動效果，上下表格對齊，滾動條樣式調整

程式碼

<!DOCTYPE>
<html>
	<head>
		<title>table</title>
		<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>測試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>

相關文章