学习网页制作技巧：给表格加滚动条

2022-07-15 80酷酷网 80kuku.com

　　技巧|网页

其实这个东西没什么技术含量，就是给大家提供一个给表格加滚动条的思路。

运行代码框

<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);//设置classoTable.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);}//设置classoTBody.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 ></body></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]