本文目录
如图，怎么在html表格中内容超出时自动显示滚动条，求代码，
指定文档类型,给所有父对象指定高度,给三个DIV指定30%高,并设overflow:auto;如:《!DOCTYPE html》《html style="height:100%;"》《body style="height:100%;"》《div style="height:30%; overflow:auto;"》1《/div》《div style="height:30%; overflow:auto;"》2《/div》《div style="height:30%; overflow:auto;"》3《div style="height:1000px;"》《/div》《/div》《/body》《/html》
如何在HTML中的表格里，实现双向滚动条
《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("我的收藏夹",); //参数说明: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; tHeadWidth=isNaN(parseInt(colHeads); theCell=oTHead.rows.insertCell(); theCell.style.width=tHeadWidth; } theCell=oTHead.rows.insertCell(); theCell.width=20; oTHead.rows.style.display="none"; //生成表头 oTHead.insertRow(); for(var i=0;i《colHeads.length;i++){ tHeadName=colHeads; tHeadWidth=isNaN(parseInt(colHeads); theCell=oTHead.rows.insertCell(); theCell.innerText=tHeadName; theCell.style.width=tHeadWidth; } theCell=oTHead.rows.insertCell(); theCell.width=24; //生成表脚 oTFoot.insertRow(); theCell=oTFoot.rows.insertCell(); theCell.innerHTML="《marquee scrollDelay=50 scrollAmount=2》Copy rights 2005. Hutia presents.《/marquee》"; theCell=oTFoot.rows.insertCell(); theCell.colSpan=colHeads.length-1; theCell=oTFoot.rows.insertCell(); theCell.width=20; //生成主体 oTable.all.tags("Tbody").insertRow(); theCell=oTable.all.tags("Tbody").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); theCell=oTBody.rows.insertCell(); theCell.style.width=tHeadWidth; } oTBody.rows.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.innerText=strGroup?strGroup:"ROOT"; theRow.cells.innerText=strName?strName:"Untitled Document."; theRow.cells.innerText=strURL?strURL:"Unspecified URL"; theRow.cells.innerHTML=strVisited?"Yes".fontcolor("red"):"Unknow"; theRow.cells.innerHTML=strModify?"Yes".fontcolor("red"):"No".fontcolor("Green"); theRow.cells.innerHTML="Delete".fontcolor("red");}《/script》《/head》《body onload="init();"》《/body》《/html》
html表格如何固定表头表格中的其他行无缝自动滚动显示
一般不用表格滚动的，因为表格里表头整个表格是一个整体除非你写两个表格，一般是用ul li来实现，比较好操作
