固定table的thead，tbody可滚动

最新推荐文章于 2024-11-05 15:28:12 发布

weixin_34233679

最新推荐文章于 2024-11-05 15:28:12 发布

阅读量106

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/266034/blog/896651

版权

本文介绍了一种使用HTML和CSS实现的具有固定表头和垂直滚动功能的表格样式。通过将表格主体设置为可滚动，同时保持表头固定，使得在查看长表格数据时更加方便。文章提供了具体的HTML结构和CSS样式代码。

摘要由CSDN通过智能技术生成

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style>		   
			table tbody {  
				display:block;  
				height:500px;  
				overflow-y:scroll;  
			}  
			
			td, th{border:solid red 1px;}			  
			  
			table thead, tbody tr {  
				display:table;  
				width:100%;  
				table-layout:fixed;  
			}  			  
			  
			table thead {  
				/*Standard */
				width: calc( 100% - 8px );
				/*chrome safari*/
				width: -webkit-calc( 100% - 8px );
				/*Firefox*/
				width: -moz-calc( 100% - 8px );				
			}
		</style>
	</head>
	<body>
		<table>   
			<thead>  
				<tr><th>aaa</th><th>bbb</th><th>aaa</th><th>bbb</th><th>aaa</th><th>bbb</th></tr>  
			</thead> 
			<tbody>  
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
				<tr><td>1</td><td>AAAAAAA</td><td>2</td><td>BBBBBBB</td><td>3</td><td>CCCCCC</td></tr>
			</tbody>  
		</table>  
	</body>
</html>

转载于:https://my.oschina.net/u/266034/blog/896651