表格头固定而列可滚动的效果
2007-11-22 00:00
344 查看
对于经常需要表格头部不东,而列表可以滚动,多用于数据比较多的情况,方便查看
表格头固定而列可滚动的效果-脚本之家
body {
font-family: "arial", "helvetica", "sans-serif", "";
font-size: 9pt;
margin: 0px;
scrollbar-face-color:#efefe7;
scrollbar-highlight-color:#ffffff;
scrollbar-3dlight-color:#a5a5a5;
scrollbar-darkshadow-color:#a5a5a5;
scrollbar-shadow-color:#d6d6ce;
scrollbar-arrow-color:#003184;
scrollbar-track-color:#deded6;
}
table {
font-family: "arial", "helvetica", "sans-serif","";
font-size: 9pt;
line-height: 150%;
color: #000000;
}
.display-tb2
{
border-right: #808080 1px solid;
border-top: #808080 1px solid;
border-left: #808080 1px solid;
border-bottom: #808080 1px solid;
border:0;
cellpadding:2;
cellspacing:0;
margin-top:2px;
border-collapse:collapse;
}
div.tableContainer
{
overflow-x:auto;
width:760px;
dyn-behavior:expression(
onscroll == null?
(onscroll = function(){
if(event.srcElement.scrollLeft == event.srcElement.oldScroll) return;
var oGridBody = document.getElementById("order_GridBody");
oGridBody.style.width = parseInt(event.srcElement.clientWidth) + event.srcElement.scrollLeft + "px";
event.srcElement.oldScroll == event.srcElement.scrollLeft;
}):true,
onmousedown == null?
(onmousedown = function(){
if(self.currentTH != null) return;
var obj = document.elementFromPoint(event.x,event.y);
var objL = document.elementFromPoint(event.x - 1,event.y);
if(obj.tagName.toLowerCase() == "th")
{
if(objL.tagName.toLowerCase() == "th")
{
obj = objL;
}
if(obj.className == "fixed") return;
self.currentX = event.x;
self.currentTH = obj.childNodes[0];
self.currentTH.setCapture();
}
}):true,
onmouseup == null?
(onmouseup = function(){
if(self.currentTH != null)
{
self.currentTH.releaseCapture();
self.currentTH = null;
}
}):true,
onmousemove == null?
(onmousemove = function(){
if(self.currentTH != null)
{
var width = Math.round(parseInt(self.currentTH.clientWidth) + event.x - self.currentX);
if(width < 0) width = 0;
var dt = parseInt(self.currentTH.style.width) - width;
self.currentTH.style.width = width;
__resizeCell(self.currentTH.columnIndex,self.currentTH.style.width);
self.currentX = event.x;
}
}):true,
self.__resizeCell == null?
(self.__resizeCell = function(idx, width){
var cells = document.getElementById("order_GridBody_Cells");
var rows = cells.childNodes;
var i = 0;
for (var i = 0; i < rows.length; i++)
{
var cell = rows[i].childNodes[idx].childNodes[0];
var resetPattern = /style=[^\s\t\n]+/;
cell.outerHTML = cell.outerHTML.toString().replace(resetPattern, "style='width:" +width + "'");
}
}):true
)
}
div.bodyContainer
{
height:250px;
width:760px;
overflow-x:hidden;
overflow-y:auto;
}
div.gridCell_standard
{
width:100px;
overflow:hidden;
nw:expression(this.noWrap=true);
margin-left: 0px;
margin-right: 1px;
padding-left: 2px;
cursor:default;
}
div.gridCell_narrow
{
width:30px;
overflow:hidden;
margin-left: 0px;
margin-right: 1px;
padding-left: 2px;
nw:expression(this.noWrap=true);
cursor:default;
}
th
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
background-image: url(images/default/headerbg.gif);
color:#ffffff;
font-style:normal;
font-weight:normal;
height:20px;
cursor:col-resize;
dyn-behavior:expression(
ondblclick == null?
(ondblclick = function()
{
var src = event.srcElement;
if(event.srcElement.tagName.toLowerCase()!="div")
{
src = src.childNodes[0];
}
src.style.width = "";
__resizeCell(src.columnIndex,src.clientWidth);
}):true
)
}
th.fixed
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
background-image: url(images/default/headerbg.gif);
color:#ffffff;
font-style:normal;
font-weight:normal;
height:20px;
cursor:default;
}
tr.odd
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 0px solid;
border-left: #a4a6a4 0px solid;
border-bottom: #a4a6a4 1px solid;
noWrap;
}
tr.even
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 0px solid;
border-left: #a4a6a4 0px solid;
border-bottom: #a4a6a4 1px solid;
}
td.odd_even
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
noWrap;
}
td.select-cell
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
}
th{
color:#ff0000;
}
选择
订单编号
订货日期
订货单位
订单类别
产品类别
版本号
订货金额
订单状态
DJPH001
2005-02-02
19
直销
KIS
5
12.0000
已取消
DJPH001
2005-02-02
19
购销
KIS
5
21.0000
DJPH889
2005-02-02
0
购销
KIS
5
21.0000
已取消
DJPH889
2005-02-02
0
直销
KIS
5
1.0000
tytutyjh465456
2005-02-02
0
购销
KIS
0
21.0000
生产部已审核
KDSZ2005050698
2005-05-05
-1
分销
KIS
10.2
21.0000
生产部已审核
KDSZ2005050698
2005-05-05
-1
分销
KIS
10.2
12.0000
总代已审核
KDSZ2005050698
2005-05-05
-1
分销
KIS
10.2
32.0000
已取消
KDSZ2005050698
2005-05-05
-1
分销
KIS
10.2
12.0000
KDSZ2005050698
2005-05-05
-1
分销
KIS
10.2
12.0000
KDSZ2005050698
2005-05-05
-1
分销
KIS
10.2
12.0000
已取消
KDSZ2005050698
2005-05-05
-1
分销
KIS
10.2
12.0000
已取消
KDSZ2005050698
2005-05-05
-1
分销
KIS
10.2
12.0000
已取消
KDSZ2005050698
2005-05-05
-1
分销
KIS
10.2
21.0000
已取消
KDSZ2005050698
2005-05-05
-1
分销
KIS
10.2
12.0000
已取消
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
表格头固定而列可滚动的效果-脚本之家
body {
font-family: "arial", "helvetica", "sans-serif", "";
font-size: 9pt;
margin: 0px;
scrollbar-face-color:#efefe7;
scrollbar-highlight-color:#ffffff;
scrollbar-3dlight-color:#a5a5a5;
scrollbar-darkshadow-color:#a5a5a5;
scrollbar-shadow-color:#d6d6ce;
scrollbar-arrow-color:#003184;
scrollbar-track-color:#deded6;
}
table {
font-family: "arial", "helvetica", "sans-serif","";
font-size: 9pt;
line-height: 150%;
color: #000000;
}
.display-tb2
{
border-right: #808080 1px solid;
border-top: #808080 1px solid;
border-left: #808080 1px solid;
border-bottom: #808080 1px solid;
border:0;
cellpadding:2;
cellspacing:0;
margin-top:2px;
border-collapse:collapse;
}
div.tableContainer
{
overflow-x:auto;
width:760px;
dyn-behavior:expression(
onscroll == null?
(onscroll = function(){
if(event.srcElement.scrollLeft == event.srcElement.oldScroll) return;
var oGridBody = document.getElementById("order_GridBody");
oGridBody.style.width = parseInt(event.srcElement.clientWidth) + event.srcElement.scrollLeft + "px";
event.srcElement.oldScroll == event.srcElement.scrollLeft;
}):true,
onmousedown == null?
(onmousedown = function(){
if(self.currentTH != null) return;
var obj = document.elementFromPoint(event.x,event.y);
var objL = document.elementFromPoint(event.x - 1,event.y);
if(obj.tagName.toLowerCase() == "th")
{
if(objL.tagName.toLowerCase() == "th")
{
obj = objL;
}
if(obj.className == "fixed") return;
self.currentX = event.x;
self.currentTH = obj.childNodes[0];
self.currentTH.setCapture();
}
}):true,
onmouseup == null?
(onmouseup = function(){
if(self.currentTH != null)
{
self.currentTH.releaseCapture();
self.currentTH = null;
}
}):true,
onmousemove == null?
(onmousemove = function(){
if(self.currentTH != null)
{
var width = Math.round(parseInt(self.currentTH.clientWidth) + event.x - self.currentX);
if(width < 0) width = 0;
var dt = parseInt(self.currentTH.style.width) - width;
self.currentTH.style.width = width;
__resizeCell(self.currentTH.columnIndex,self.currentTH.style.width);
self.currentX = event.x;
}
}):true,
self.__resizeCell == null?
(self.__resizeCell = function(idx, width){
var cells = document.getElementById("order_GridBody_Cells");
var rows = cells.childNodes;
var i = 0;
for (var i = 0; i < rows.length; i++)
{
var cell = rows[i].childNodes[idx].childNodes[0];
var resetPattern = /style=[^\s\t\n]+/;
cell.outerHTML = cell.outerHTML.toString().replace(resetPattern, "style='width:" +width + "'");
}
}):true
)
}
div.bodyContainer
{
height:250px;
width:760px;
overflow-x:hidden;
overflow-y:auto;
}
div.gridCell_standard
{
width:100px;
overflow:hidden;
nw:expression(this.noWrap=true);
margin-left: 0px;
margin-right: 1px;
padding-left: 2px;
cursor:default;
}
div.gridCell_narrow
{
width:30px;
overflow:hidden;
margin-left: 0px;
margin-right: 1px;
padding-left: 2px;
nw:expression(this.noWrap=true);
cursor:default;
}
th
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
background-image: url(images/default/headerbg.gif);
color:#ffffff;
font-style:normal;
font-weight:normal;
height:20px;
cursor:col-resize;
dyn-behavior:expression(
ondblclick == null?
(ondblclick = function()
{
var src = event.srcElement;
if(event.srcElement.tagName.toLowerCase()!="div")
{
src = src.childNodes[0];
}
src.style.width = "";
__resizeCell(src.columnIndex,src.clientWidth);
}):true
)
}
th.fixed
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
background-image: url(images/default/headerbg.gif);
color:#ffffff;
font-style:normal;
font-weight:normal;
height:20px;
cursor:default;
}
tr.odd
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 0px solid;
border-left: #a4a6a4 0px solid;
border-bottom: #a4a6a4 1px solid;
noWrap;
}
tr.even
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 0px solid;
border-left: #a4a6a4 0px solid;
border-bottom: #a4a6a4 1px solid;
}
td.odd_even
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
noWrap;
}
td.select-cell
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
}
th{
color:#ff0000;
}
选择
订单编号
订货日期
订货单位
订单类别
产品类别
版本号
订货金额
订单状态
DJPH001
2005-02-02
19
直销
KIS
5
12.0000
已取消
DJPH001
2005-02-02
19
购销
KIS
5
21.0000
DJPH889
2005-02-02
0
购销
KIS
5
21.0000
已取消
DJPH889
2005-02-02
0
直销
KIS
5
1.0000
tytutyjh465456
2005-02-02
0
购销
KIS
0
21.0000
生产部已审核
KDSZ2005050698
2005-05-05
-1
分销
KIS
10.2
21.0000
生产部已审核
KDSZ2005050698
2005-05-05
-1
分销
KIS
10.2
12.0000
总代已审核
KDSZ2005050698
2005-05-05
-1
分销
KIS
10.2
32.0000
已取消
KDSZ2005050698
2005-05-05
-1
分销
KIS
10.2
12.0000
KDSZ2005050698
2005-05-05
-1
分销
KIS
10.2
12.0000
KDSZ2005050698
2005-05-05
-1
分销
KIS
10.2
12.0000
已取消
KDSZ2005050698
2005-05-05
-1
分销
KIS
10.2
12.0000
已取消
KDSZ2005050698
2005-05-05
-1
分销
KIS
10.2
12.0000
已取消
KDSZ2005050698
2005-05-05
-1
分销
KIS
10.2
21.0000
已取消
KDSZ2005050698
2005-05-05
-1
分销
KIS
10.2
12.0000
已取消
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关文章推荐
- 表格头固定而列可滚动的效果
- 表格头固定而列可滚动的效果
- jQuery滚动表格-->固定表头 + 冻结窗格效果
- GridView表头固定,表体滚动效果
- 如何用纯CSS固定thead实现表格滚动?tbody设置overflow之密
- Asp.net 2.0 自定义控件开发[实现GridView多行表头固定表体滚动效果]
- JS(JQ)实现table表格固定表头且表头可以随横向滚动而滚动
- 滚动层固定效果
- 固定定位实现滚动广告效果
- 表头固定和表格的左侧固定效果,有没有什么类型的更好的插件啊什么的,知道的推荐下
- bootstrap表格固定表头,表格内容滚动条滚动显示
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
- Asp.net 2.0 自定义控件开发[实现GridView多行表头固定表体滚动效果][示例代码下载]
- Asp.net 2.0 自定义控件开发[实现GridView多行表头固定表体滚动效果][示例代码下载]
- Asp.net 2.0 自定义控件开发[实现GridView多行表头固定表体滚动效果][示例代码下载]
- CSS实现表格表头(thead)固定,内容(tbody)滚动
- VUE2.0 实现移动端在固定区域内的滚动效果
- css设置背景固定不滚动效果的示例
- 网页 滚屏特效,用flash做背景,定时滚动,ccs背景代码效果语法,使用CSS处理表格边框样式化
- Asp.net 2.0 自定义控件开发[实现GridView多行表头固定表体滚动效果][示例代码下载]