html加纵向滚动条,添纵向滚动条

当前位置:我的异常网» Web前端 » 添纵向滚动条

添纵向滚动条

www.myexceptions.net  网友分享于：2013-11-24  浏览：82次

加纵向滚动条

version 1

My table

.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;

}

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

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

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="Copy rights 2005. Hutia presents.";

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

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.οnmοuseοver=rowOnMouseOver;

theRow.οnmοuseοut=rowOnMouseOut;

theRow.οnclick=rowOnClick;

for(var i=0;i

theCell=theRow.insertCell();

theCell.tabIndex=0;

theCell.hideFocus=true;

theCell.colIndex=i;

theCell.οnmοuseοver=function(){this.focus();};

theCell.οnmοuseοut=cellOnBlur;

theCell.οnfοcus=cellOnFocus;

theCell.οnblur=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");

}

version 2

title1 title2 title3 title4 title1 title2 title3 title4 title1 title2 title3 title4 title1 title2 title3 title4 title1 title2 title3 title4 title1 title2 title3 title4 title1 title2 title3 title4 title1 title2 title3 title4 title1 title2 title3 title4 title1 title2 title3 title4 title1 title2 title3 title4 title1 title2 title3 title4 title1 title2 title3 title4 文章评论