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

最新推荐文章于 2024-04-23 16:58:51 发布

chiyingliao3565

最新推荐文章于 2024-04-23 16:58:51 发布

阅读量122

点赞数

文章标签： java 运维

原文链接：https://my.oschina.net/moziqi/blog/305703

版权

点击链接加入群【JavaEE(SSH+IntelliJIDE+Maven)】：http://jq.qq.com/?_wv=1027&k=L2rbHv

<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>

转载于:https://my.oschina.net/moziqi/blog/305703

chiyingliao3565

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格表头固定,内容多时滚动内容

点击链接加入群【JavaEE(SSH+IntelliJIDE+Maven)】：http://jq.qq.com/?_wv=1027&k=L2rbHv <html> <head> <styletype="text/css"> *{...
复制链接

扫一扫