其实这个东西没什么技术含量，就是给大家提供一个给表格加滚动条的思路。
运行代码框<html> <head> <title>My table</title> <style> .table0 { height:90%; } .table0 caption{ width:100%; height:26px; line-height:26px; font-size:20px; font-color:black; font-weight:900; letter-spacing:5px; } .table0 thead td { text-align:center; vertical-align:middle; height:20px; line-height:18px; font-size:14px; font-color:black; font-weight:bold; padding-top:2px; padding-bottom:2px; border:#555 1px solid; margin:0px; } .table0 tfoot td{ text-align:left; vertical-align:middle; height:20px; line-height:18px; font-size:12px; font-color:black; font-weight:bold; padding-top:2px; padding-bottom:2px; padding-left:12px; padding-right:12px; border:#555 1px solid; } .table0 tbody td { width:100%; height:auto; border:#555 1px solid; padding:0px; margin:0px; } .table1 tbody td { text-align:left; vertical-align:middle; height:20px; line-height:18px; font-size:14px; font-color:#444; font-weight:normal; padding-top:2px; padding-bottom:2px; padding-left:12px; padding-right:12px; border-right:#555 1px solid; border-bottom:#555 1px solid; overflow:hidden; text-overflow:ellipsis; word-break:keep-all; word-wrap:normal; } </style> <script> function init(){ theT=createTable('我的收藏夹',['Group:150','Name:300','URL:200','Visited:100','Modify:100','Delete:100']); //参数说明:createTable(strCaption,colHeads) //strCaption 标题 //colHeads 是一个array,每个item的格式是 名称:宽度 的字符串 for(var i=0;i<40;i++){ theR=theT.insertRow(); for(var j=0;j<7;j++){ theC=theR.insertCell(); theC.innerText=j; } } } function createTable(strCaption,colHeads){ //参数说明:colHeads 是一个array,每个item的格式是 名称:宽度 的字符串 //生成表格 oTable=document.createElement('table'); document.body.insertBefore(oTable); //设置class oTable.className='table0'; with(oTable.style){ tableLayout='fixed'; borderCollapse='collapse' borderSpacing='0px'; } //设置变量 oTCaption=oTable.createCaption(); oTHead=oTable.createTHead(); oTFoot=oTable.createTFoot(); //生成标题 oTCaption.innerText=strCaption; //设置列宽 oTHead.insertRow(); for(var i=0;i<colHeads.length;i++){ tHeadName=colHeads[i].split(':')[0]; tHeadWidth=isNaN(parseInt(colHeads[i].split(':')[1]))?'auto':parseInt(colHeads[i].split(':')[1]); theCell=oTHead.rows[0].insertCell(); theCell.style.width=tHeadWidth; } theCell=oTHead.rows[0].insertCell(); theCell.width=20; oTHead.rows[0].style.display='none'; //生成表头 oTHead.insertRow(); for(var i=0;i<colHeads.length;i++){ tHeadName=colHeads[i].split(':')[0]; tHeadWidth=isNaN(parseInt(colHeads[i].split(':')[1]))?'auto':parseInt(colHeads[i].split(':')[1]); theCell=oTHead.rows[1].insertCell(); theCell.innerText=tHeadName; theCell.style.width=tHeadWidth; } theCell=oTHead.rows[1].insertCell(); theCell.width=24; //生成表脚 oTFoot.insertRow(); theCell=oTFoot.rows[0].insertCell(); theCell.innerHTML='<marquee scrollDelay=50 scrollAmount=2>Copy rights 2005. Hutia presents.</marquee>'; theCell=oTFoot.rows[0].insertCell(); theCell.colSpan=colHeads.length-1; theCell=oTFoot.rows[0].insertCell(); theCell.width=20; //生成主体 oTable.all.tags('Tbody')[0].insertRow(); theCell=oTable.all.tags('Tbody')[0].rows[0].insertCell(); theCell.colSpan=colHeads.length+1; oMain=document.createElement('DIV'); theCell.insertBefore(oMain); with(oMain.style){ width='100%'; height='100%'; overflowY='auto'; overflowX='hidden'; margin='0px'; marginLeft='-1px'; } oTBody=document.createElement('table'); oMain.insertBefore(oTBody); oTable.oTBody=oTBody; //禁止选择 oTCaption.onselectstart=oTHead.onselectstart=oTFoot.onselectstart=function(){return(false);} //设置class oTBody.className='table1'; with(oTBody.style){ width=oTable.offsetWidth-15; tableLayout='fixed'; borderCollapse='collapse' borderSpacing='0px'; padding='0px'; margin='0px'; } //初始化列宽 oTBody.insertRow(); for(var i=0;i<colHeads.length;i++){ tHeadWidth=isNaN(parseInt(colHeads[i].split(':')[1]))?'auto':parseInt(colHeads[i].split(':')[1]); theCell=oTBody.rows[0].insertCell(); theCell.style.width=tHeadWidth; } oTBody.rows[0].style.display='none'; return(oTBody); } function insertRow(){ var intL=oTBody.rows.length; theRow=oTBody.insertRow(); theRow.index=intL; theRow.onmouseover=rowOnMouseOver; theRow.onmouseout=rowOnMouseOut; theRow.onclick=rowOnClick; for(var i=0;i<colHeads.length;i++){ theCell=theRow.insertCell(); theCell.tabIndex=0; theCell.hideFocus=true; theCell.colIndex=i; theCell.onmouseover=function(){this.focus();}; theCell.onmouseout=cellOnBlur; theCell.onfocus=cellOnFocus; theCell.onblur=cellOnBlur; } theRow.cells[0].innerText=strGroup?strGroup:'ROOT'; theRow.cells[1].innerText=strName?strName:'Untitled Document.'; theRow.cells[2].innerText=strURL?strURL:'Unspecified URL'; theRow.cells[3].innerHTML=strVisited?'Yes'.fontcolor('red'):'Unknow'; theRow.cells[4].innerHTML=strModify?'Yes'.fontcolor('red'):'No'.fontcolor('Green'); theRow.cells[5].innerHTML='Delete'.fontcolor('red'); } </script> </head> <body onload='init();'> </body> </html>
