日期:2014-05-16  浏览次数:20279 次

如何给table顶端和底端都加上一个水平滚动条?
如何给table顶端和底端都加上一个水平滚动条?

------解决方案--------------------
需求很怪啊,写了个例子,主要是table2里的内容
<table id= "allTable " style= "width:100%;height:200 " cellspaces=0 cellpadding=0 >
<tr style= "height:20 ">
<td>
<div id= "div1 " style= "overflow-x:scroll;width:100%;height:20 " onscroll=scrollWindow(this, "div2 ")>
<div id= "div1 " style= "width:200%; ">
&nbsp;
</div>
</div>
</td>
</tr>
<tr>
<td >
<div id= "div2 " style= "overflow-x:scroll;width:100%;height:100% " onscroll=scrollWindow(this, "div1 ")>
<table id= "table2 " style= "width:200%;background-color:red;height:100% " border= "1 ">
<tr>
<td > adsasdaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<script language=javascript>
function scrollWindow(obj,id)
{
document.getElementById(id).scrollLeft=obj.scrollLeft
}
</script>
------解决方案--------------------
有必要吗?做成分页不就可以了吗?
------解决方案--------------------
<table width= "80%% " border= "1 " id= "Tbl ">
<tr>
<td> &nbsp; </td>
<td> &nbsp; </td>
<td> &nbsp; </td>
</tr>
<tr>
<td> &nbsp; </td>
<td> &nbsp; </td>
<td> &nbsp; </td>
</tr>
<tr>
<td> &nbsp; </td>
<td> &nbsp; </td>
<td> &nbsp; </td>
</tr>
</table>

<script type= "text/javascript ">
/* <![CDATA[*/
var Tbl = document.getElementById( "Tbl ");

//document.body.appendChild(Hr)

fInsertNode(Tbl, document.createElement( "hr "), true);
fInsertNode(Tbl, document.createElement( "hr "), false);

function fInsertNode(OldNode, NewNode, bBefore)
{// shawl.qiu script
var ParentNode = OldNode.parentNode;
if(!ParentNode)return false;
if(bBefore)
{
ParentNode.insertBefore(NewNode,OldNode);
return false;
} // end if
ParentNode.replaceChild(NewNode, OldNode);
ParentNode.insertBefore(OldNode, NewNode);
} // end function fInsertNode
/*]]*/
</script>