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
文章评论 |
html加纵向滚动条,添纵向滚动条相关推荐
- html纵向滚动条隐藏,隐藏横向滚动条或纵向滚动条的解决方案
在WEB实际开发过程中,特别是在iframe引用其它网页时,可能大家遇到过这样的问题,当您的页面在框架中的时候,即使您的所有的控件的宽度都没有超过屏幕宽度(一般设置为100%),但横向滚动条依然出现. ...
- el-tree 解决横向滚动条和纵向滚动条问题
如题,在el-tree所处的代码块中,加入滚动条,使其能够滚动 使用overflow:scroll 即可 overflow定义:设定如果内容溢出元素设定范围后该怎么做. overflow:visibl ...
- html自定义横纵向滚动条,html的滚动条样式设置
如果需要对DIV设置一个滚动条,那么你可能需要设置滚动条的样式,横向或者纵向,需要用overflow-y和overflow-x来设置,今天就来给大家说一下这俩个属性. 对div设置滚动条,设置其横向滚 ...
- extjs给panel添加滚动条_ExtJs Panel 滚动条设置
设置autoscroll:true同时出现横向和纵向滚动条. 不要设置autoscroll属性,或者autoscroll:false,然后设置bodyStyle : 'overflow-x:hidde ...
- html div 隐藏滚动条样式,div滚动条样式隐藏与显示
DIV滚动条样式是可以设置的,CSS滚动条同样也可以显示与隐藏,对div设置滚动条,设置其横向滚动条和纵向滚动条样式应该怎么做呢? 要设置CSS滚动条样式,需要用到overflow-y和overflo ...
- 【Vue】滚动条(设置滚动条、滚动条样式、鼠标移入滚动条显示移出滚动条隐藏....)
目录 设置滚动条 滚动条样式 1.隐藏滚动条 2.常用滚动条的样式的示例 滚动条的应用 1.标签页的内容滚动,标签头部固定 2.鼠标移入显示滚动条,鼠标移出隐藏滚动条 3.实现导航栏鼠标上滑显示下滑隐 ...
- html5自动出现滚动条,html展示滚动条 html 自动显示横向滚动条
html 怎么去掉网页的滚动条 然后给子div添加内容,为了让滚动条可以实现,尽量多添加一些内容. html 自动显示横向滚动条 假设一个页面上有一个DIV,他的宽度设为了width:70%:怎样实现 ...
- vuejs滚动条_Vue.js 桌面端虚拟滚动条|vue美化滚动条VScroll
介绍 VScroll 一款基于vue2.x构建的桌面PC端自定义模拟滚动条组件.支持自定义是否原生滚动条.自动隐藏.滚动条大小.层级及颜色等功能.拥有丝滑般的原生滚动条体验! 除了垂直滚动条,同样的也 ...
- 解决boostrap-table有水平和垂直滚动条时,滚动条滑到最右边表格标题和内容单元格无法对齐的问题
解决boostrap-table有水平和垂直滚动条时,滚动条滑到最右边表格标题和内容单元格无法对齐的问题 参考文章: (1)解决boostrap-table有水平和垂直滚动条时,滚动条滑到最右边表格标 ...
最新文章
- 小知识~LocalDB在IIS上如何成功配置
- signature=65a5d6b0ac441e09ae68e9bbee76cba1,Bortezomib
- POJ 2458 DFS+判重
- php反序列化漏洞原理,PHP反序列化原理及漏洞解析
- Mac安装webpack报错gyp ERR! configure error gyp ERR! stack Error: `gyp` failed with exit code: 1解决
- 创建您自己的.NET DynamicObject 为什么、何时和如何
- 【动态规划笔记】背包问题:搬寝室
- python周环比增长率_Python如何计算环比增长率
- 这款打怪升级的小游戏,7 年前出生于 GitHub 社区,如今在谷歌商店有 8 万人打了满分...
- 【CF869E】The Untended Antiquity(哈希+二维树状数组)
- 安卓版的PanDownload 下载网盘资源
- 【语音算法】语音的预处理--端点检测
- laravel5.6 使用mail发送附件邮件
- eclipse中导入jmf的方法,在java中使用jmf播放音频文件的正确方式
- 异构群体机器人协作任务分配(群体智能论文学习)
- MySQL-表连接的几种方式
- 嵌入式软件设计第十次实验报告-140201235-陈宇
- Android MD5 RSA DES等几种加密算法
- python 全栈开发,Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)...
- Google Chrome浏览器插件安装——GitHub加速 1.0.9插件安装