之前写过一个,把表头的固定,内容多时滚动内容:http://redstarofsleep.iteye.com/blog/1010569
当时表格的宽度是固定的,而且滚动条永远在最右边,如果表格的宽度不是具体的像素值,而是百分比,那种方法貌似就不太灵光了啊,所以这次重新写了一个.
思路还是有一些区别的,效果上的改进是把滚动条靠到了表格边上,然后表格的宽度可以是百分比,随着浏览器大小的变化自适应.以下是代码:
<html>
<head>
<style type="text/css">
/*所有内容都在这个DIV内*/
div.all {
border: 3px solid #FF00FF;
width: 80%; /*这个宽度可根据实际需要改变*/
clear: right;
}
/*表头在这个DIV内*/
div.title {
width: 100%;
}
/*内容在这个DIV内*/
div.content {
width: 100%;
overflow: scroll; /*总是显示滚动条*/
overflow-x: hidden; /*去掉横向滚动条*/
height: 100px;
}
div.title_left {
float: left;
margin-right: 17px;
}
div.content_left {
float: left;
}
.main_table {
width: 100%;
border: 1px solid #FF00FF;
border-collapse: collapse; /*边线与旁边的合并*/
table-layout:fixed;
}
.main_table tr th {
border: 1px solid #FF00FF;
overflow: hidden; /*超出长度的内容不显示*/
/*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/
word-break: break-all; /*字内断开*/
text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记(…),省略标记插入的位置是最后一个字符*/
white-space: nowrap;
}
/*单元格样式*/
.main_table tr td {
border: 1px solid #FF00FF;
overflow: hidden;
/*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/
word-break: break-all;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="all">
<div class="title">
<div class="title_left">
<table class="main_table">
<tr>
<th>aaa</th><th style="width:30%">aaa</th><th>ccc</th><th>bbb</th>
</tr>
</table>
</div>
</div>
<div class="content">
<div class="content_left">
<table class="main_table">
<tr>
<td>aaa</td><td style="width:30%">aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
分享到:
相关推荐
表格表头固定 内容可以滚动(示例): 表格表头固定,内容可以滚动,前提是表格在一个div中
HTML5_html表头固定不滚动而内容滚动的效果,表格是基于Div CSS实现的,将表头固定...在显示较多数据时,当用户滚动鼠标中轮时,表格内容会滚动,而表头固定不变,可以将表格内容与表头很好的对应,便于阅读表格内容。
jQuery实现表头固定表格内容滚动效果 jQuery实现表头固定表格内容滚动效果
表头固定内容上下左右滚动jquery简便版
自己写的不同风格的表头固定内容滚动代码,直接压缩就可以看到效果,希望对后来者有用。
使用bootstrap编写的动态表格【当滚动纵向的滚动条时,表格的表头处于悬浮状态,表格的内容滚动;当滚动横向的滚动条时,表格的表头和表格的内容对应着一起滚动】
bootstrap的tbody加竖向滚动条,而且当前表格的表头。bootstrap的tbody加竖向滚动条,而且当前表格的表头。bootstrap的tbody加竖向滚动条,而且当前表格的表头。
绝对可用的纯CSS固定表头样式,适用多种浏览器,实例的方式展示,我们公司开发的应用软件就用的是这种固定表头的样式
jQuery仿excel表格头部固定内容滚动效果代码
实现表格头部固定,表格数据滚动的插件,详细内容及用法见下载包
表格固定表头,内容部分添加滚动条,表头部滚动代码
主要介绍了JS实现table表格固定表头且表头可以随横向滚动而滚动,需要的朋友可以参考下
C#自定义滚动表格,表头固定,表体从下往上动态平滑滚动,类似于电影字幕动画效果,使用GDI绘图实现,可以作为动态显示屏公式信息使用。
html表格,固定表头,上下滚动时固定,左右滚动时自动对齐,缩放浏览器时,功能一样完美执行 ! 本人亲手写,亲自测试,功能完美,代码简单易懂! 对需要该功能特效的html表格的亲来说,有很大的帮助哦! 产权所有人:ぶん...
纯CSS实现表头固定表格滚动条效果,所需代码不多兼容浏览器。方便移植至JSP、ASP、PHP。好用记得评论喔
这次我们要来分享一些关于网页表格数据展示优化的jQuery插件,首先表格的表头是固定的,当数据行比较多时,向下拖动表格行时,也可以清楚地知道每一列数据的意义。其次表格的滚动条时经过美化过的,重写了浏览器自带...
主要介绍了html Table 表头固定的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
jQuery表格顶部与左右两侧固定滚动代码是一款左右两侧固定列,中间内容可以横向拖动,固定表头,可以横向拖动的表格插件代码。
非常好用,可以给表格添加滚动条,固定表头,支持冻结列,简单实用. 使用方法: $(document).ready(function() { $("#tblReceiptsSalesDay").toSuperTable({ width: "950px", height: "350px", fixedCols:3, ...