欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

表格表头固定,内容多时滚动内容

程序员文章站 2022-07-12 09:19:06
...

不多写废话了,都在代码注释中

<html>
	<head>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			/*所有内容都在这个DIV内*/
			.all {
				width: 100%;
				border: 1px solid #000000;
			}
			
			/*表头在这个DIV内*/
			.title {
				width: 500px;  /*这个宽度需要与下面的内容的DIV相等*/
			}
			
			/*表格样式*/
			table {
				width: 100%;  /*撑满上面定义的500像素*/
				border: 1px solid #FF00FF;
				border-collapse: collapse;  /*边线与旁边的合并*/
				table-layout:fixed;
			}
			/*表头单元格(这里将表头单元格的样式设置成了和单元格一样,实际中可以改变)*/
			table tr th {
				border: 1px solid #FF00FF;
				overflow: hidden;  /*超出长度的内容不显示*/
				/*word-wrap: break-word;  内容将在边界内换行,这里显示省略号,所以不需要了*/
				word-break: break-all;  /*字内断开*/
				text-overflow: ellipsis;  /*当对象内文本溢出时显示省略标记(…),省略标记插入的位置是最后一个字符*/
				white-space: nowrap;
			}
			/*单元格样式*/
			table tr td {
				border: 1px solid #FF00FF;
				overflow: hidden;
				/*word-wrap: break-word;  内容将在边界内换行,这里显示省略号,所以不需要了*/
				word-break: break-all;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			/*容纳表格内容的DIV,这个DIV上放置滚动条*/
			.content {
				width: 100%;
				height: 100px;  /*定一下高度,要不然就撑出来没滚动条了*/
				overflow: scroll;  /*总是显示滚动条*/
			}
			/*真正存放内容的DIV*/
			.content div {
				width: 500px;  /*与表头的DIV宽度相同*/
			}
		</style>
	</head>
	
	<body>
		<div class="all">
			<div class="title">
				<table>
					<tr>
						<th style="width:10%">Operate</th>
						<th style="width:20%">Date</th>
						<th style="width:25%">Acknowledge</th>
						<th style="width:15%">Other1</th>
						<th style="width:15%">Other2</th>
						<th>Other3</th>
					</tr>
				</table>
			</div>
			
			<div class="content">
				<div>
					<table>
						<tr>
							<td style="width:10%">Operate</td>
							<td style="width:20%">Date</td>
							<td style="width:25%">Acknowledge</td>
							<td style="width:15%">Other1</td>
							<td style="width:15%">Other2</td>
							<td>Other3</td>
						</tr>
						<tr>
							<td>Operate</td>
							<td>Date</td>
							<td>Acknowledge</td>
							<td>Other21</td>
							<td>Other22</td>
							<td>Other3</td>
						</tr>
						<tr>
							<td>Operate</td>
							<td>Date</td>
							<td>Acknowledge</td>
							<td>Other31</td>
							<td>Other32</td>
							<td>Other3</td>
						</tr>
						<tr>
							<td>Operate</td>
							<td>Date</td>
							<td>Acknowledge</td>
							<td>Other41</td>
							<td>Other42</td>
							<td>Other3</td>
						</tr>
						<tr>
							<td>Operate</td>
							<td>2011-12-12 12:22:34 9987</td>
							<td>Acknowledge</td>
							<td>Other51</td>
							<td>Other52</td>
							<!--每个td上都要加个title,鼠标放上去时显示全部内容,我这里偷懒就写了一个-->
							<td title="Other3hhhhhhhhhhhhhhhhhhhhhhhhaa">Other3hhhhhhhhhhhhhhhhhhhhhhhhaa</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</body>
</html>
相关标签: CSS