<Script language = "JavaScript">
var tdW;
//Scroll
function f_scroll(Col_T,Row_T,DivNm){
if(Col_T!=''){
document.getElementById(Col_T).scrollLeft = document.getElementById(DivNm).scrollLeft;
}
if(Row_T!=''){
document.getElementById(Row_T).scrollTop = document.getElementById(DivNm).scrollTop;
}
}
//Write table cell
function writeTD(trNum,tdNum,tdHead,content){
var i;
for(i=0;i<=tdNum;i++){
document.write(tdHead);
if(content != ''){
document.write(content);
} else {
document.write(trNum+","+i);
}
document.write("</TD>");
}
}
//Write table Row
function writeTR(trNum,tdNum,tdHead,content){
var i;
for(i=0;i<=trNum;i++){
document.write("<TR>");
writeTD(i,tdNum,tdHead,content);
document.write("</TR>");
}
}
</Script>
<TABLE BORDER=0 STYLE="POSITION:ABSOLUTE;LEFT: 0px;TOP: 0px;right: 0px;
bottom: 0px;background-color: khaki;">
<TR>
<TD STYLE="text-align:right;">
<!--Table1 start-->
<Div ID="Table1"
STYLE="position:relative;top:5;left:4;border-bottom: 0.5pt solid white;
width:26.25px;height:20px;">
<TABLE BORDER=0 STYLE="border-collapse:collapse;text-align:center;
width:26.25px;height:20px;">
<TR>
<TD NOWRAP
STYLE="width:60px;height:40;background-color:silver;
color:#FFFFFF;border-right: 0.5pt solid white;
word-break:break-all;border:0.5pt solid black;">
</TD>
</TR>
</TABLE>
</Div>
<!--Table1 end-->
</TD>
<TD>
<!--Table2 start-->
<Div ID="Table2"
STYLE="position:relative; top:5;border-bottom: 0.5pt solid white;
height:20px; width:481px;overflow-x:hidden;">
<TABLE BORDER=0
STYLE="border-collapse:collapse;background-color:#003399;
color: #FFFFFF;text-align:center;height:40px;">
<TR>
<script language=javascript>
tdW='<TD NOWRAP STYLE="width:100px;background-color:silver;'+
'color:black;border-color:#silver;border:0.5pt solid black;'+
'border-left:0;word-break:break-all;">';
writeTD(0,20,tdW,'');
</script>
</TR>
</TABLE>
</Div>
<!--Table2 end-->
</TD>
</TR>
<TR>
<TD STYLE="vertical-align:top; ">
<!--Table3 start-->
<Div ID="Table3"
STYLE="border-bottom: 0.5pt solid black;width:26.25px; height:265px;
overflow-y:hidden; position:relative;left:4;">
<TABLE BORDER=0
STYLE="border-collapse:collapse;background-color:#FFFFFF;
color:#000000;height:20px;">
<script language=javascript>
tdW='<TD NOWRAP STYLE="width:60px;height:22px;text-align:center;'+
'border-left: 0.5pt solid black;border-right: 0.5pt solid black;'+
'border-bottom: 0.5pt solid black;word-break: break-all;'+
'background-color:silver;">';
writeTR(30,0,tdW,'');
</script>
</TABLE>
</Div>
<!--Table3 end-->
</TD>
<TD STYLE="vertical-align:top; ">
<!--Table4 start-->
<Div ID="Table4"
onScroll="f_scroll('Table2','Table3','Table4');"
STYLE="height:281px; width:497px;overflow-y:scroll;overflow-x:scroll;">
<TABLE BORDER=0 STYLE="border-collapse:collapse;">
<script language=javascript>
tdW='<TD NOWRAP STYLE="width:100px;height:22px;background-color:#ffffff;'+
'border-right:0.5pt solid black;border-bottom:0.5pt solid black;'+
'word-break: break-all; text-align:center;">';
writeTR(30,20,tdW,'');
</script>
</TABLE>
</Div>
<!--Table4 end-->
</TD>
</TR>
</TABLE>
- 大小: 9.8 KB
分享到:
相关推荐
锁定表头及固定左边列,原生JS原创代码 需要注意的问题: 1.表格的宽度以及表格每一列的宽度需要固定...2.0 增加 window.onresize事件监听(当触发 window.onresize时自动重新固定表头) 增加左边固定位置鼠标滚轮事件
gridview固定表头 横向滚动 纵向固定,即拖动横向滚动条时,表头随着表体移动,纵向拖动滚动条时,表头不动,实践得出来的结果 我用的是VS2010,C#
Android可固定表头和第一列自定义表格,集成简单。 API使用说明: LockTableView mLockTableView=new LockTableView(this,mContentView,mTableDatas); mLockTableView.setLockFristColumn(true) //是否锁定第一列 ...
android listview 固定表头,固定前几列
js固定表头和第一列固定,内容变化
vue移动端项目 一个可以固定表头首列的表格 ,没有使用UI插件。 感兴趣的朋友可以参考下,希望对大家有所帮助
移动端项目,移动端table固定表头与固定第一列,HTML5和css3
固定表头,点击表头排序,拖动表格的列宽,使用非常方便
固定表头最简单的方法(仅IE有效) 不需要使用top:[removed]this.offsetParent.scrollTop - 1);样式
JQuery固定表头 及左侧列
移动端项目,移动端table固定表头与固定第一列,HTML5和css3
固定表头的DataGrid
Jquery table固定表头,固定列,全浏览器兼容 Jquery table固定表头,固定列,全浏览器兼容
固定表头的listview listview表头固定,下面的一组适配器数据
table表格固定表头与固定列的源代码,用css样式来设置,只支持ie系统浏览器
Fixed Header Table 固定表头 插件
这是一个可以固定表头的jQuery插件。当表格向下滚动时,表头不会跟着动。兼容IE6.7.8.9 ,Chrome ,FF 国外的
gridview固定表头 横向滚动 纵向固定,即拖动横向滚动条时,表头随着表体移动,纵向拖动滚动条时,表头固定不动 实践中所得一个具体实例 VS2010,C#
绝对可用的纯CSS固定表头样式,适用多种浏览器,实例的方式展示,我们公司开发的应用软件就用的是这种固定表头的样式
非常好用,可以给表格添加滚动条,固定表头,支持冻结列,简单实用. 使用方法: $(document).ready(function() { $("#tblReceiptsSalesDay").toSuperTable({ width: "950px", height: "350px", fixedCols:3, ...