`
redstarofsleep
  • 浏览: 439944 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

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

CSS 
阅读更多

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

<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>
40
顶
9
踩
分享到：
| 网上找的代码太多,自己用JQuery写一个横向 ...
评论
15 楼 zenpignoy 2014-05-20  
  楼主  列过多时 内容横向滚动时  标题title不滚动怎么解决？
14 楼 wqmain 2011-05-13  
jquery flexigrid
13 楼 竹隐江南 2011-05-12  
不搞前端，web涉及，不过看了楼主想法应该和我差不多，用了两个div。额额收藏下这合乎
12 楼 redstarofsleep 2011-05-10  
引用

楼主，问你个问题啊，你这样只是解决了列表太长，方便查看，要是需要查看的列表非常宽，你虽然查看的数据时自动出现了横拉条，但是表头左右并没有随着横拉条左右移动，请问楼主，有解决办法没？由于本人并不是搞前端页面的，所以不是太懂，只是会copy，不会自己去创造，望楼主给出个完美解决方案啊！

把content的样式改下可以满足你的要求
/*容纳表格内容的DIV,这个DIV上放置滚动条*/  
                .content {  
                    width: 515px;  
                    height: 100px;  /*定一下高度,要不然就撑出来没滚动条了*/  
                    overflow: scroll;  /*总是显示滚动条*/
		    overflow-x: hidden; 
                }
11 楼 ankonlcy 2011-05-09  
楼主，问你个问题啊，你这样只是解决了列表太长，方便查看，要是需要查看的列表非常宽，你虽然查看的数据时自动出现了横拉条，但是表头左右并没有随着横拉条左右移动，请问楼主，有解决办法没？由于本人并不是搞前端页面的，所以不是太懂，只是会copy，不会自己去创造，望楼主给出个完美解决方案啊！
10 楼 fywxin 2011-05-04  
redstarofsleep 写道
fywxin 写道
我也是用楼主这方式设计的，在chrome和IE下周没问题，在firefox下就出问题了，存放数据的那个table的td值在firefox下的值比实际值大，导致表格出问题。不知道楼主现在解决了没，我们可以站内信息交流一下，

我在Firefox下没有问题啊!


问题以解决，原因是我在第二个table的td中多加了float:left;这个东西，去掉后就正常了。多谢楼主
9 楼 redstarofsleep 2011-05-04  
fywxin 写道
我也是用楼主这方式设计的，在chrome和IE下周没问题，在firefox下就出问题了，存放数据的那个table的td值在firefox下的值比实际值大，导致表格出问题。不知道楼主现在解决了没，我们可以站内信息交流一下，

我在Firefox下没有问题啊!
8 楼 fywxin 2011-05-03  
我也是用楼主这方式设计的，在chrome和IE下周没问题，在firefox下就出问题了，存放数据的那个table的td值在firefox下的值比实际值大，导致表格出问题。不知道楼主现在解决了没，我们可以站内信息交流一下，
7 楼 etao7393 2011-04-26  
有很多插件，比如jquery 的 supertable, 还是不错的。
6 楼 redstarofsleep 2011-04-25  
java仰望|俯视 写道
多个table的问题很严重

很多时候表头与列不对应

希望哪位给个比较好的拉动


我试过了啊,多个Table,每个宽度不一样,列数也不一样都没有问题啊,没有乱掉啊.......
5 楼 java仰望|俯视 2011-04-25  
多个table的问题很严重

很多时候表头与列不对应

希望哪位给个比较好的拉动
4 楼 不复记忆 2011-04-25  
redstarofsleep 写道
不复记忆 写道
兼容火狐嘛？

当然兼容

之前我那个在网上找的不支持火狐，这个没试过，有空试一试
3 楼 jokiye 2011-04-25  
firefox不支持text-overflow
2 楼 redstarofsleep 2011-04-22  
不复记忆 写道
兼容火狐嘛？

当然兼容
1 楼 不复记忆 2011-04-22  
兼容火狐嘛？
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics