紧急求助：大侠帮忙看一看：为什么固定首行（点击按钮）后，右边没有对齐

时间：2021-06-29 14:16:19
代码如下，问题如上。
竭诚求助。----紧急中！！！

<html>
<head>
<style>
tr {background-color:expression((sectionRowIndex%2)?'e0e0e0':'eeeeee')};
td{font-size:11}
</style>
</head>

<script language=javascript>
function  changeColWidth()
{
if(the11Table.rows[0].style.display=="none")return false;
var theThe10TableColsNum=the10Table.rows[0].cells.length;
for(var i=0;i<theThe10TableColsNum-1;i++)
{
the10Table.rows[0].cells[i].width=the10Table.rows[0].cells[i].offsetWidth;
the10Table.rows[1].cells[i].width=the10Table.rows[0].cells[i].offsetWidth;
}
var theThe11TableColsNum=the11Table.rows[0].cells.length;
for(var i=0;i<theThe11TableColsNum;i++)
{
the11Table.rows[0].cells[i].width=the11Table.rows[0].cells[i].offsetWidth;
the11Table.rows[1].cells[i].width=the11Table.rows[0].cells[i].offsetWidth;
}
the00Div.innerHTML="<table width='100%'  id=the00Table cellspacing='1' border='0' cellpadding='0' class='tdStyleNonEdit'>"
+the10Table.rows[0].outerHTML+"</table>";
the01Div.innerHTML="<table width='100%'  id=the01Table cellspacing='1' border='0' cellpadding='0' class='tdStyleNonEdit'>"
+the11Table.rows[0].outerHTML+"</table>";
the10Table.rows[0].style.display="none";
the11Table.rows[0].style.display="none";

alert(the11Table.rows[1].outerHTML);

}

</script>

<body>
<input type=button value="Fix the head tr" onclick="changeColWidth()">
<table width='100%' border='0'  cellspacing='0' cellpadding='0'>
<tr>
<td valign=top width=80%>
<div style="overflow-x:hidden;overflow-y:hidden;" id=the00Div >
</div>

</div>
<div id=the10Div style="height:100;overflow-x:hidden;overflow-y:auto;" onscroll= "the11Div.scrollTop=scrollTop ">
<table id=the10Table width='100%' cellspacing='1' border='0' cellpadding='0' >
<tr height=22>
<td nowrap >Thank you!</td>
<td nowrap >You are welcome!</td>
</tr> 
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>

</table>
<br>
</div>
</td>
<td valign=top >
<div id=the01Div style="overFlow-x:hidden;overflow-y:hidden;" onscroll= "the11Div.scrollLeft=scrollLeft ">
</div>
<div id=the11Div style="width:450; height:100;overFlow-x:auto;overflow-y:hidden;" onscroll= "the10Div.scrollTop=scrollTop;the01Div.scrollLeft=scrollLeft;">
<table id=the11Table width='100%' cellspacing='1' border='0' cellpadding='0' >
<tr height=22>
<td nowrap >How are you? How are you?How are you? How are you?How are you? How are you?How are you? How are you? </td>
<td nowrap >I am fine</td>
</tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>

</table>
<br>
</div>
</td>
</tr>
</table>
</body>
</html>


6 个解决方案

#1

the10Table.rows[0].cells[i].width
===>style.pixelWidth

#2

the11Table.rows[0].cells[i].pixelWidth=the11Table.rows[0].cells[i].offsetWidth;
the11Table.rows[1].cells[i].pixelWidth=the11Table.rows[0].cells[i].offsetWidth;

#3

sorry:
你去掉那两个循环才是可以的(上面说错了)

#4

Thanks 阿信。
不过方法无效。---不知是不是我用错了。

#5



<html>
<head>
<style>
tr {background-color:expression((sectionRowIndex%2)?'e0e0e0':'eeeeee')};
td{font-size:11}
</style>
</head>

<script language=javascript>
function  changeColWidth()
{
if(the11Table.rows[0].style.display=="none")return false;
var theThe10TableColsNum=the10Table.rows[0].cells.length;
for(var i=0;i<theThe10TableColsNum-1;i++)
{
the10Table.rows[0].cells[i].width =the10Table.rows[0].cells[i].offsetWidth;
the10Table.rows[1].cells[i].width =the10Table.rows[0].cells[i].offsetWidth;
}
var theThe11TableColsNum=the11Table.rows[0].cells.length;
for(var i=0;i<theThe11TableColsNum;i++)
{
the11Table.rows[0].cells[i].width=the11Table.rows[0].cells[i].offsetWidth;
the11Table.rows[1].cells[i].width=the11Table.rows[0].cells[i].offsetWidth;
}
the00Div.innerHTML="<table width='100%'  id=the00Table cellspacing='1' border='0' cellpadding='0' class='tdStyleNonEdit'>"
+the10Table.rows[0].outerHTML+"</table>";
the01Div.innerHTML="<table width='100%'  id=the01Table cellspacing='1' border='0' cellpadding='0' class='tdStyleNonEdit'>"
+the11Table.rows[0].outerHTML+"</table>";
the11Table.style.width=the11Table.offsetWidth;//加了这一句。
the10Table.rows[0].style.display="none";
the11Table.rows[0].style.display="none";

alert(the11Table.rows[1].outerHTML);

}

</script>

<body>
<input type=button value="Fix the head tr" onclick="changeColWidth()">
<table width='100%' border='0'  cellspacing='0' cellpadding='0'>
<tr>
<td valign=top width=80%>
<div style="overflow-x:hidden;overflow-y:hidden;" id=the00Div >
</div>

</div>
<div id=the10Div style="height:100;overflow-x:hidden;overflow-y:auto;" onscroll= "the11Div.scrollTop=scrollTop ">
<table id=the10Table width='100%' cellspacing='1' border='0' cellpadding='0' >
<tr height=22>
<td nowrap >Thank you!</td>
<td nowrap >You are welcome!</td>
</tr> 
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>

</table>
<br>
</div>
</td>
<td valign=top >
<div id=the01Div style="width:450;overFlow-x:hidden;overflow-y:hidden;" onscroll= "the11Div.scrollLeft=scrollLeft ">
</div>
<div id=the11Div style="width:450; height:100;overFlow-x:auto;overflow-y:hidden;" onscroll= "the10Div.scrollTop=scrollTop;the01Div.scrollLeft=scrollLeft;">
<table id=the11Table width='100%' cellspacing='1' border='0' cellpadding='0' >
<tr height=22>
<td nowrap >How are you? How are you?How are you? How are you?How are you? How are you?How are you? How are you? </td>
<td nowrap >I am fine</td>
</tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>

</table>
<br>
</div>
</td>
</tr>
</table>
</body>
</html>

#6

OK啦。

<html>
<head>
<style>
tr {background-color:expression((sectionRowIndex%2)?'e0e0e0':'eeeeee')};
td{font-size:11}
</style>
</head>

<script language=javascript>
function  changeColWidth()
{
if(the11Table.rows[0].style.display=="none")return false;
var theThe10TableColsNum=the10Table.rows[0].cells.length;
for(var i=0;i<theThe10TableColsNum-1;i++)
{
the10Table.rows[0].cells[i].width =the10Table.rows[0].cells[i].offsetWidth;
the10Table.rows[1].cells[i].width =the10Table.rows[0].cells[i].offsetWidth;
}
var theThe11TableColsNum=the11Table.rows[0].cells.length;
for(var i=0;i<theThe11TableColsNum;i++)
{
the11Table.rows[0].cells[i].width=the11Table.rows[0].cells[i].offsetWidth;
the11Table.rows[1].cells[i].width=the11Table.rows[0].cells[i].offsetWidth;
}
the00Div.innerHTML="<table width='100%'  id=the00Table cellspacing='1' border='0' cellpadding='0' class='tdStyleNonEdit'>"
+the10Table.rows[0].outerHTML+"</table>";
the01Div.innerHTML="<table width='100%'  id=the01Table cellspacing='1' border='0' cellpadding='0' class='tdStyleNonEdit'>"
+the11Table.rows[0].outerHTML+"</table>";
the11Table.style.width=the11Table.offsetWidth;
the01Div.style.width=the11Div.style.width;
the10Table.rows[0].style.display="none";
the11Table.rows[0].style.display="none";

alert(the11Table.rows[1].outerHTML);

}

</script>

<body>
<input type=button value="Fix the head tr" onclick="changeColWidth()">
<table width='100%' border='0'  cellspacing='0' cellpadding='0'>
<tr>
<td valign=top width=80%>
<div style="overflow-x:hidden;overflow-y:hidden;" id=the00Div >
</div>

<div id=the10Div style="height:100;overflow-x:hidden;overflow-y:auto;" onscroll= "the11Div.scrollTop=scrollTop ">
<table id=the10Table width='100%' cellspacing='1' border='0' cellpadding='0' >
<tr height=22>
<td nowrap >Thank you!</td>
<td nowrap >You are welcome!</td>
</tr> 
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>

</table>
<br>
</div>
</td>
<td valign=top >
<div id=the01Div style="overFlow-x:hidden;overflow-y:hidden;" onscroll= "the11Div.scrollLeft=scrollLeft ">
</div>

<div id=the11Div style="width:450; height:100;overFlow-x:auto;overflow-y:hidden;" onscroll= "the10Div.scrollTop=scrollTop;the01Div.scrollLeft=scrollLeft;">
<table id=the11Table width='100%' cellspacing='1' border='0' cellpadding='0' >
<tr height=22>
<td nowrap >How are you? How are you?How are you? How are you?How are you? How are you?How are you? How are you? </td>
<td nowrap >I am fine</td>
</tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>

</table>
<br>
</div>
</td>
</tr>
</table>
</body>
</html>

#1

the10Table.rows[0].cells[i].width
===>style.pixelWidth

#2

the11Table.rows[0].cells[i].pixelWidth=the11Table.rows[0].cells[i].offsetWidth;
the11Table.rows[1].cells[i].pixelWidth=the11Table.rows[0].cells[i].offsetWidth;

#3

sorry:
你去掉那两个循环才是可以的(上面说错了)

#4

Thanks 阿信。
不过方法无效。---不知是不是我用错了。

#5



<html>
<head>
<style>
tr {background-color:expression((sectionRowIndex%2)?'e0e0e0':'eeeeee')};
td{font-size:11}
</style>
</head>

<script language=javascript>
function  changeColWidth()
{
if(the11Table.rows[0].style.display=="none")return false;
var theThe10TableColsNum=the10Table.rows[0].cells.length;
for(var i=0;i<theThe10TableColsNum-1;i++)
{
the10Table.rows[0].cells[i].width =the10Table.rows[0].cells[i].offsetWidth;
the10Table.rows[1].cells[i].width =the10Table.rows[0].cells[i].offsetWidth;
}
var theThe11TableColsNum=the11Table.rows[0].cells.length;
for(var i=0;i<theThe11TableColsNum;i++)
{
the11Table.rows[0].cells[i].width=the11Table.rows[0].cells[i].offsetWidth;
the11Table.rows[1].cells[i].width=the11Table.rows[0].cells[i].offsetWidth;
}
the00Div.innerHTML="<table width='100%'  id=the00Table cellspacing='1' border='0' cellpadding='0' class='tdStyleNonEdit'>"
+the10Table.rows[0].outerHTML+"</table>";
the01Div.innerHTML="<table width='100%'  id=the01Table cellspacing='1' border='0' cellpadding='0' class='tdStyleNonEdit'>"
+the11Table.rows[0].outerHTML+"</table>";
the11Table.style.width=the11Table.offsetWidth;//加了这一句。
the10Table.rows[0].style.display="none";
the11Table.rows[0].style.display="none";

alert(the11Table.rows[1].outerHTML);

}

</script>

<body>
<input type=button value="Fix the head tr" onclick="changeColWidth()">
<table width='100%' border='0'  cellspacing='0' cellpadding='0'>
<tr>
<td valign=top width=80%>
<div style="overflow-x:hidden;overflow-y:hidden;" id=the00Div >
</div>

</div>
<div id=the10Div style="height:100;overflow-x:hidden;overflow-y:auto;" onscroll= "the11Div.scrollTop=scrollTop ">
<table id=the10Table width='100%' cellspacing='1' border='0' cellpadding='0' >
<tr height=22>
<td nowrap >Thank you!</td>
<td nowrap >You are welcome!</td>
</tr> 
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>

</table>
<br>
</div>
</td>
<td valign=top >
<div id=the01Div style="width:450;overFlow-x:hidden;overflow-y:hidden;" onscroll= "the11Div.scrollLeft=scrollLeft ">
</div>
<div id=the11Div style="width:450; height:100;overFlow-x:auto;overflow-y:hidden;" onscroll= "the10Div.scrollTop=scrollTop;the01Div.scrollLeft=scrollLeft;">
<table id=the11Table width='100%' cellspacing='1' border='0' cellpadding='0' >
<tr height=22>
<td nowrap >How are you? How are you?How are you? How are you?How are you? How are you?How are you? How are you? </td>
<td nowrap >I am fine</td>
</tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>

</table>
<br>
</div>
</td>
</tr>
</table>
</body>
</html>

#6

OK啦。

<html>
<head>
<style>
tr {background-color:expression((sectionRowIndex%2)?'e0e0e0':'eeeeee')};
td{font-size:11}
</style>
</head>

<script language=javascript>
function  changeColWidth()
{
if(the11Table.rows[0].style.display=="none")return false;
var theThe10TableColsNum=the10Table.rows[0].cells.length;
for(var i=0;i<theThe10TableColsNum-1;i++)
{
the10Table.rows[0].cells[i].width =the10Table.rows[0].cells[i].offsetWidth;
the10Table.rows[1].cells[i].width =the10Table.rows[0].cells[i].offsetWidth;
}
var theThe11TableColsNum=the11Table.rows[0].cells.length;
for(var i=0;i<theThe11TableColsNum;i++)
{
the11Table.rows[0].cells[i].width=the11Table.rows[0].cells[i].offsetWidth;
the11Table.rows[1].cells[i].width=the11Table.rows[0].cells[i].offsetWidth;
}
the00Div.innerHTML="<table width='100%'  id=the00Table cellspacing='1' border='0' cellpadding='0' class='tdStyleNonEdit'>"
+the10Table.rows[0].outerHTML+"</table>";
the01Div.innerHTML="<table width='100%'  id=the01Table cellspacing='1' border='0' cellpadding='0' class='tdStyleNonEdit'>"
+the11Table.rows[0].outerHTML+"</table>";
the11Table.style.width=the11Table.offsetWidth;
the01Div.style.width=the11Div.style.width;
the10Table.rows[0].style.display="none";
the11Table.rows[0].style.display="none";

alert(the11Table.rows[1].outerHTML);

}

</script>

<body>
<input type=button value="Fix the head tr" onclick="changeColWidth()">
<table width='100%' border='0'  cellspacing='0' cellpadding='0'>
<tr>
<td valign=top width=80%>
<div style="overflow-x:hidden;overflow-y:hidden;" id=the00Div >
</div>

<div id=the10Div style="height:100;overflow-x:hidden;overflow-y:auto;" onscroll= "the11Div.scrollTop=scrollTop ">
<table id=the10Table width='100%' cellspacing='1' border='0' cellpadding='0' >
<tr height=22>
<td nowrap >Thank you!</td>
<td nowrap >You are welcome!</td>
</tr> 
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>

</table>
<br>
</div>
</td>
<td valign=top >
<div id=the01Div style="overFlow-x:hidden;overflow-y:hidden;" onscroll= "the11Div.scrollLeft=scrollLeft ">
</div>

<div id=the11Div style="width:450; height:100;overFlow-x:auto;overflow-y:hidden;" onscroll= "the10Div.scrollTop=scrollTop;the01Div.scrollLeft=scrollLeft;">
<table id=the11Table width='100%' cellspacing='1' border='0' cellpadding='0' >
<tr height=22>
<td nowrap >How are you? How are you?How are you? How are you?How are you? How are you?How are you? How are you? </td>
<td nowrap >I am fine</td>
</tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>
<tr height=22><td>a</td><td>&nbsp;</td></tr>

</table>
<br>
</div>
</td>
</tr>
</table>
</body>
</html>
标签：

相关文章