怎么固定表格的一部分

rongwenfeng 2003-11-27 01:52:00
就是一个表格中有好多数据,第一条是表头,表很长也很宽,我怎么才能移动左右滚动条的时候,左边的两个格不动,只后面的动,移动上下滚动条的时候,表头不动,只有下面的动呢???最好不用FRAME
...全文
219 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
rongwenfeng 2003-11-30
  • 打赏
  • 举报
 回复
我不要FRAME或DIV的,我记得有一个是直接用CSS解决的,可是现在找不到例子了,所以来求助各位大虾了
wanghr100 2003-11-30
  • 打赏
  • 举报
 回复
这里有.
http://expert.csdn.net/Expert/topic/2484/2484929.xml?temp=.8523065
michael2004 2003-11-29
  • 打赏
  • 举报
 回复
或者可以试试用.net的那种repeater或者内嵌datagrid的方法
狼总 2003-11-28
  • 打赏
  • 举报
 回复
完全没有那么麻烦，看看这个：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
<!--
.middle {
overflow: auto;
width: 600px;
height: 40px;
}
-->
</style>
</head>

<body>
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100">左边单元格内容</td>
<td><div align="center" class="middle">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td nowrap>中间单元格内容。在这里随便写多长的内容都可以。</td>
</tr>
</table>
</div></td>
<td width="100">右边单元格内容</td>
</tr>
</table>
</body>
</html>
rongwenfeng 2003-11-28
  • 打赏
  • 举报
 回复
怎么没有人给出意见啊???
dszyx001 2003-11-28
  • 打赏
  • 举报
 回复
www.51js.com中宝玉有代码，可以到那去看看。
liuzxit 2003-11-28
  • 打赏
  • 举报
 回复
不太完美的东西
lockTable.htm========
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=big5">
<script language="javascript" src="locktable.js"></script>
</head>
<div style="MARGIN: 2pt; OVERFLOW: scroll;width:150px;height:100px;">
<table id="tbl" border=0 cellspacing="1" cellpadding="0" bgcolor=#660000>
<tr><td nowrap bgcolor=#bbbbbb>标题一</td><td nowrap bgcolor=#bbbbbb>标题二</td><td nowrap bgcolor=#bbbbbb>标题三</td><td nowrap bgcolor=#bbbbbb>标题四</td></tr>
<tr><td bgcolor=#bbbbbb>内容A</td><td bgcolor=#ffffff>内容B</td><td bgcolor=#ffffff>内容C</td><td bgcolor=#ffffff>内容D</td></tr>
<tr><td bgcolor=#bbbbbb>内容A</td><td bgcolor=#ffffff>内容B</td><td bgcolor=#ffffff>内容C</td><td bgcolor=#ffffff>内容D</td></tr>
<tr><td bgcolor=#bbbbbb>内容A</td><td bgcolor=#ffffff>内容B</td><td bgcolor=#ffffff>内容C</td><td bgcolor=#ffffff>内容D</td></tr>
<tr><td bgcolor=#bbbbbb>内容A</td><td bgcolor=#ffffff>内容B</td><td bgcolor=#ffffff>内容C</td><td bgcolor=#ffffff>内容D</td></tr>
<tr><td bgcolor=#bbbbbb>内容A</td><td bgcolor=#ffffff>内容B</td><td bgcolor=#ffffff>内容C</td><td bgcolor=#ffffff>内容D</td></tr>
<tr><td bgcolor=#bbbbbb>内容A</td><td bgcolor=#ffffff>内容B</td><td bgcolor=#ffffff>内容C</td><td bgcolor=#ffffff>内容D</td></tr>
<tr><td bgcolor=#bbbbbb>内容A</td><td bgcolor=#ffffff>内容B</td><td bgcolor=#ffffff>内容C</td><td bgcolor=#ffffff>内容D</td></tr>
<tr><td nowrap bgcolor=#bbbbbb>标题一</td><td nowrap bgcolor=#bbbbbb>标题二</td><td nowrap bgcolor=#bbbbbb>标题三</td><td nowrap bgcolor=#bbbbbb>标题四</td></tr>
</table>
</div>
<script language="javascript">
LockTable(tbl,1,1,1);
</script>


lockTable.js================
function DrawTable(scrTable,newTable,iStart,iEnd,jEnd){
var i,j,k=0,newTR,newTD,intWidth=0,intHeight=0;
newTable.mergeAttributes(scrTable);
for (i=iStart;i<iEnd;i++){
newTR=newTable.insertRow(k)
newTR.mergeAttributes(scrTable.rows[i]);
intHeight += scrTable.rows[i].offsetHeight;
intWidth=0;
for(j=0;j<(jEnd==-1?scrTable.rows[i].cells.length:jEnd);j++){
newTD=scrTable.rows[i].cells[j].cloneNode(true);
intWidth+= scrTable.rows[i].cells[j].offsetWidth;
newTR.insertBefore(newTD);
newTD.style.pixelWidth=scrTable.rows[i].cells[j].offsetWidth;
}
k++
}
newTable.style.pixelWidth=intWidth;
newTable.style.pixelHeight=intHeight;
}

function LockTable(arTable,ColNum,RowHead,RowFoot){
arTable.HeadRow=RowHead;
var objDivMaster=arTable.parentElement;
if(objDivMaster.tagName!='DIV')return;
if((arTable.offsetHeight > objDivMaster.offsetHeight)&&(arTable.offsetWidth > objDivMaster.offsetWidth)){
if((ColNum > 0) && (RowHead > 0)){
var objTableLH=document.createElement("TABLE");
var newTBody=document.createElement("TBODY");
objTableLH.insertBefore(newTBody);
objTableLH.id="objTableLH";
objDivMaster.parentElement.insertBefore(objTableLH);
DrawTable(arTable,objTableLH,0,RowHead,ColNum)
objTableLH.srcTable=arTable;
with(objTableLH.style){
zIndex=804;
position='absolute'
pixelLeft=objDivMaster.offsetLeft;
pixelTop=objDivMaster.offsetTop;
}
}

if((ColNum > 0) && (RowFoot > 0)){
var objTableLF=document.createElement("TABLE");
var newTBody=document.createElement("TBODY");
objTableLF.insertBefore(newTBody);
objTableLF.id="objTableLF";
objDivMaster.parentElement.insertBefore(objTableLF);
DrawTable(arTable,objTableLF,arTable.rows.length - RowFoot,arTable.rows.length,ColNum)
objTableLF.srcTable=arTable;
with(objTableLF.style){
zIndex=803;
position='absolute'
pixelLeft=objDivMaster.offsetLeft;
pixelTop=objDivMaster.offsetTop + objDivMaster.offsetHeight - objTableLF.offsetHeight - 16;
}
}
}

if((RowHead > 0) && (arTable.offsetHeight > objDivMaster.offsetHeight)){
var DivHead=document.createElement("DIV");
objDivMaster.parentElement.insertBefore(DivHead);
var objTableHead=document.createElement("TABLE");
var newTBody=document.createElement("TBODY");
objTableHead.id="HeadTar";
objTableHead.style.position="relative"
objTableHead.insertBefore(newTBody);
DivHead.insertBefore(objTableHead);
DrawTable(arTable,objTableHead,0,RowHead,-1)
HeadTar.srcTable=arTable;
with(DivHead.style){
overflow="hidden";
zIndex=802;
pixelWidth=objDivMaster.offsetWidth - 16
position='absolute';
pixelLeft=objDivMaster.offsetLeft;
pixelTop=objDivMaster.offsetTop;
}
objDivMaster.attachEvent("onscroll",divScroll1);
}

if((RowFoot > 0) && (arTable.offsetHeight > objDivMaster.offsetHeight)){
var DivFoot=document.createElement("DIV");
objDivMaster.parentElement.insertBefore(DivFoot);
var objTableFoot=document.createElement("TABLE");
var newTBody=document.createElement("TBODY");
objTableFoot.insertBefore(newTBody);
objTableFoot.id="FootTar";
objTableFoot.style.position="relative"
DivFoot.insertBefore(objTableFoot);
DrawTable(arTable,objTableFoot,arTable.rows.length - RowFoot,arTable.rows.length,-1)
objTableFoot.srcTable=arTable;
with(DivFoot.style){
overflow="hidden";
zIndex=801;
pixelWidth=objDivMaster.offsetWidth - 16
position='absolute'
pixelLeft=objDivMaster.offsetLeft;
pixelTop=objDivMaster.offsetTop + objDivMaster.offsetHeight - DivFoot.offsetHeight - 16;
}
objDivMaster.attachEvent("onscroll",divScroll2);
}

if((ColNum > 0) && (arTable.offsetWidth > objDivMaster.offsetWidth)){
var DivLeft=document.createElement("DIV");
objDivMaster.parentElement.insertBefore(DivLeft);
var objTableLeft=document.createElement("TABLE");
var newTBody=document.createElement("TBODY");
objTableLeft.insertBefore(newTBody);
objTableLeft.id="LeftTar";
objTableLeft.style.position="relative";
DivLeft.insertBefore(objTableLeft);
DrawTable(arTable,objTableLeft,0,arTable.rows.length,ColNum)
LeftTar.srcTable=arTable;
with(DivLeft.style){
overflow="hidden";
zIndex=800;
pixelWidth=objDivMaster.offsetWidth - 16
pixelHeight=objDivMaster.offsetHeight - 16
position='absolute'
pixelLeft=objDivMaster.offsetLeft;
pixelTop=objDivMaster.offsetTop;
}
objDivMaster.attachEvent("onscroll",divScroll3);
}
}

function divScroll1(){
var tbl=document.all('HeadTar').srcTable,parDiv=tbl.parentElement;
while(parDiv.tagName!='DIV')parDiv=parDiv.parentElement;
window.status=-parDiv.scrollLeft
document.all('HeadTar').style.pixelLeft= -parDiv.scrollLeft;
}

function divScroll2(){
var tbl=document.all('FootTar').srcTable,parDiv=tbl.parentElement;
while(parDiv.tagName!='DIV')parDiv=parDiv.parentElement;
window.status=-parDiv.scrollLeft
document.all('FootTar').style.pixelLeft= -parDiv.scrollLeft;
}

function divScroll3(){
var tbl=document.all('LeftTar').srcTable,parDiv=tbl.parentElement;
while(parDiv.tagName!='DIV')parDiv=parDiv.parentElement;
window.status=-parDiv.scrollLeft
document.all('LeftTar').style.pixelTop= -parDiv.scrollTop;
}

rongwenfeng 2003-11-28
  • 打赏
  • 举报
 回复
ding
rongwenfeng 2003-11-27
  • 打赏
  • 举报
 回复
对，就是和excel的那个功能是一样的
hkongm 2003-11-27
  • 打赏
  • 举报
 回复
像EXCEL似的？

同求
SQL语句基础教程
SQL语句基础教程
实现表格第一列固定
背景 (1) 需求 固定表格的第一列，其余列可以左右滑动。这样的需求往往出现在移动端的表格显示。 (2) 难点 这个功能的难点在于：如果把第一列从表格中抽出，行无法对齐。 (3) 已有解决方案 网上有很多解决方案： 固定表格高度，只能显示一列。将第一列抽出固定在最左。 js动态计算各高度 对于这些方案要不过于繁琐复杂，要不单行显示不利于用户体验。 实现 对于...
通过js实现固定表格的表头和某列
通过js实现固定表格的表头和某列 在开发过程中，如果数据比较多并且需要对比查看的情况下，一般是是需要固定表头和开始的某几列。可以通过一些组件进行实现。但是引用组件需要引入大量的js文件或者不满足某一方面的需求。这时候就需要自己动手写一个这样的效果。 需求 表格是页面的主体部分，表格的数据量比较大，需要表格左右可以滑动，上下也可以滑动。在滑动中表头固定，第一列，第二列固定...
element表格固定某一行_ElementUI Table 首行固定
需求描述：首行固定，吸附在表头下，数据多时其他行可以纵向滚动方案一 两个表格拼凑第一个表格展示头部和固定行 第二个表格展示其它数据 示意图如下优点：固定行数没有限制缺点：适用场景，仅横向 纵向均无滚动条时可用若有横向滚动条，两个表格的滚动条是分开的，会出现滚动A B不动，或滚动B A不动的情况，Windows下会展示两个横向滚动条，不美观若有纵向滚动条，在Windows下滚动条是默认有宽度的，...
html实现文字在表格上方左侧,html实现固定表格四周并且可以上下左右滚动
这篇文章主要为大家详细介绍了固定表格四周实现表格上下左右滚动的解决方法，表格上下滚动时，表格头尾固定；左右滚动的时候表格，表格第一列最后一列固定，本文为大家提供了思路，感兴趣的小伙伴们可以参考一下问题：最近做项目统计的时候碰见一个特定的需求，要求表格上下滚动时，表格头尾固定；左右滚动的时候表格，表格第一列最后一列固定。先上效果图可能会更明了些：左右滚动时，两列固定，头尾中间部分跟着滚动。上下滚动时...
CSS

61,125

社区成员

60,706

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章