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

redstarofsleep

浏览: 443885 次
性别:
来自: 苏州

最近访客更多访客>>

mulingya

pch272215690

z3996821

sanrenxing_1

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端

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
踩

分享到：

Java正则表达式入门[转] | 网上找的代码太多,自己用JQuery写一个横向 ...

2011-04-20 22:13
浏览 14175
评论(15)
分类:Web前端
查看更多

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

10 楼 fywxin 2011-05-04

redstarofsleep 写道

fywxin 写道

我也是用楼主这方式设计的，在chrome和IE下周没问题，在firefox下就出问题了，存放数据的那个table的td值在firefox下的值比实际值大，导致表格出问题。不知道楼主现在解决了没，我们可以站内信息交流一下，

我在Firefox下没有问题啊!

问题以解决，原因是我在第二个table的td中多加了float:left;这个东西，去掉后就正常了。多谢楼主

9 楼 redstarofsleep 2011-05-04

fywxin 写道

我在Firefox下没有问题啊!

8 楼 fywxin 2011-05-03

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

兼容火狐嘛？

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论