`

加纵向滚动条

 
阅读更多
version 1
<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>

version 2
<html>
<body>
<table style="border:1px #000000 solid;width:90%;" cellspacing="0" cellpadding="0">
<tr>
<td width='10%' colspan="4" style="border:0px #ffffff solid;padding:0px;margin:0px; vertical-align:top;" cellspacing="0" cellpadding="0">
<div>
<table style="width:100%; padding:0px; margin:0px;" cellspacing="0" cellpadding="0">
<tr style="background:#ffeecc;">
<td>
<table style="width:100%; padding:0px; margin:0px;" cellspacing="0" cellpadding="0">
<tr>
<td width='10%' style="border:1px #ffffff solid">title1</td>
<td width='20%' style="border:1px #ffffff solid">title2</td>
<td width='30%' style="border:1px #ffffff solid">title3</td>
<td  style="border:1px #ffffff solid;border-right:0px">title4</td>
</tr>
</table>
</td>
<td width="16px;" style="border:1px #ffffff solid;border-left:0px">
&nbsp;
</td>
</tr>
<tr style="background:#bbccff;">
<td >
<table style="width:100%; padding:0px; margin:0px;" cellspacing="0" cellpadding="0">
<tr>
<td width='10%' style="border:1px #ffffff solid">title1</td>
<td width='20%' style="border:1px #ffffff solid">title2</td>
<td width='30%' style="border:1px #ffffff solid">title3</td>
<td  style="border:1px #ffffff solid;border-right:0px">title4</td>
</tr>
</table>
</td>
<td width="16px;" style="border:1px #ffffff solid;border-left:0px">
&nbsp;
</td>
</tr>
<table style="width:100%; padding:0px; margin:0px;" cellspacing="0" >
</div>
</td>
</tr>
<tr>
<td width='10%' colspan="4" style="border:0px #ffffff solid;height:150px; padding:0px;margin:0px; vertical-align:top;" cellspacing="0" cellpadding="0">
<div style="overflow-y: scroll;height:150px;">
<table style="width:100%; padding:0px; margin:0px;background:#cccccc;" cellspacing="0" >
<tr style="padding:0px; margin:0px;">
<td width='10%' style="border:1px #ffffff solid">title1</td>
<td width='20%' style="border:1px #ffffff solid">title2</td>
<td width='30%' style="border:1px #ffffff solid">title3</td>
<td  style="border:1px #ffffff solid">title4</td>
</tr>
<tr style="padding:0px; margin:0px;">
<td width='10%' style="border:1px #ffffff solid">title1</td>
<td width='20%' style="border:1px #ffffff solid">title2</td>
<td width='30%' style="border:1px #ffffff solid">title3</td>
<td  style="border:1px #ffffff solid">title4</td>
</tr>
<tr style="padding:0px; margin:0px;">
<td width='10%' style="border:1px #ffffff solid">title1</td>
<td width='20%' style="border:1px #ffffff solid">title2</td>
<td width='30%' style="border:1px #ffffff solid">title3</td>
<td  style="border:1px #ffffff solid">title4</td>
</tr>
<tr style="padding:0px; margin:0px;">
<td width='10%' style="border:1px #ffffff solid">title1</td>
<td width='20%' style="border:1px #ffffff solid">title2</td>
<td width='30%' style="border:1px #ffffff solid">title3</td>
<td  style="border:1px #ffffff solid">title4</td>
</tr> <tr style="padding:0px; margin:0px;">
<td width='10%' style="border:1px #ffffff solid">title1</td>
<td width='20%' style="border:1px #ffffff solid">title2</td>
<td width='30%' style="border:1px #ffffff solid">title3</td>
<td  style="border:1px #ffffff solid">title4</td>
</tr> <tr style="padding:0px; margin:0px;">
<td width='10%' style="border:1px #ffffff solid">title1</td>
<td width='20%' style="border:1px #ffffff solid">title2</td>
<td width='30%' style="border:1px #ffffff solid">title3</td>
<td  style="border:1px #ffffff solid">title4</td>
</tr> <tr style="padding:0px; margin:0px;">
<td width='10%' style="border:1px #ffffff solid">title1</td>
<td width='20%' style="border:1px #ffffff solid">title2</td>
<td width='30%' style="border:1px #ffffff solid">title3</td>
<td  style="border:1px #ffffff solid">title4</td>
</tr> <tr style="padding:0px; margin:0px;">
<td width='10%' style="border:1px #ffffff solid">title1</td>
<td width='20%' style="border:1px #ffffff solid">title2</td>
<td width='30%' style="border:1px #ffffff solid">title3</td>
<td  style="border:1px #ffffff solid">title4</td>
</tr> <tr style="padding:0px; margin:0px;">
<td width='10%' style="border:1px #ffffff solid">title1</td>
<td width='20%' style="border:1px #ffffff solid">title2</td>
<td width='30%' style="border:1px #ffffff solid">title3</td>
<td  style="border:1px #ffffff solid">title4</td>
</tr> <tr style="padding:0px; margin:0px;">
<td width='10%' style="border:1px #ffffff solid">title1</td>
<td width='20%' style="border:1px #ffffff solid">title2</td>
<td width='30%' style="border:1px #ffffff solid">title3</td>
<td  style="border:1px #ffffff solid">title4</td>
</tr> <tr style="padding:0px; margin:0px;">
<td width='10%' style="border:1px #ffffff solid">title1</td>
<td width='20%' style="border:1px #ffffff solid">title2</td>
<td width='30%' style="border:1px #ffffff solid">title3</td>
<td  style="border:1px #ffffff solid">title4</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>

分享到：
| h:panelGrid 属性详解
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    为select下拉框添加滚动条

    当下拉菜单选项比较多的时候，select下拉列表内容过多，在IE中默认是30条选项，firefox默认是20条， 超过自动出现滚动条，但是在没出现滚动条时候样式特别不协调。本次上传的代码将提供一种方法将select下拉框添加...

    易语言API滚动条操作

    描述中的关键词如“消息钩子”、“置横向滚动条”、“置纵向滚动条”以及“显示滚动条_”等都是与滚动条操作相关的技术点。 1. **消息钩子**：消息钩子是Windows API中的一种机制，允许程序监视系统或特定线程的...

    易语言超级列表框加滚动条

    本话题聚焦于“易语言超级列表框加滚动条”，这是一项在易语言程序中实现用户界面优化的重要技术。超级列表框是易语言中常用的一种控件，用于显示大量数据，并通过滚动条功能来方便用户查看超出屏幕范围的信息。 1....

    Ext中的Grid控制纵向滚动条单次滚动量

    在处理大数据集时，Grid往往会出现纵向滚动条，以方便用户浏览表格内容。当数据行数非常多时，用户可能希望自定义滚动条的滚动量，即单次滚动鼠标滚轮时，Grid表格移动的行数。这涉及到对Grid Panel的滚动行为进行...

    易语言滚动条置颜色

    易语言滚动条置颜色是一个关于在易语言编程环境中改变滚动条外观的技术，主要涉及滚动条的颜色定制和窗口处理。在Windows编程中，滚动条是窗口界面的重要组成部分，它允许用户在大量信息中进行上下左右的浏览。...

    易语言超级列表框加滚动条.7z

    在这个"易语言超级列表框加滚动条"的项目中，我们主要探讨的是如何在易语言中为超级列表框组件添加滚动条功能，以提升用户体验。 超级列表框是易语言提供的一种控件，它允许程序显示大量的数据，通常用于数据浏览和...

    页面出现滚动条的时候如何让滚动条不影响页面宽度

    在网页设计中，当页面内容超出了可视区域的宽度时，浏览器会自动添加水平滚动条以允许用户水平滚动查看隐藏的内容。然而，滚动条本身会占用一定的空间，这可能会导致页面宽度缩小，从而影响布局的整体美观性。为了不...

    vue自定义浏览器滚动条(兼容大部分浏览器含ie)_vue tree组件 下拉滚动条

    在前端开发中，有时我们需要对浏览器的默认滚动条进行自定义，以提升用户体验或符合页面设计风格。Vue.js，作为一款流行的JavaScript框架，提供了多种方式来实现这一需求。本篇文章将详细探讨如何在Vue项目中自定义...

    火山安卓纵向滚动容器例程.zip

    【火山安卓纵向滚动容器例程】是一个针对Android平台的开发示例，主要展示了如何在应用中实现一个可以纵向滚动的视图容器。这个容器能够容纳多个子视图，并且允许用户通过上下滑动来浏览这些子视图。在Android开发中...

    webbrowser滚动条隐藏

    /* 隐藏纵向滚动条 */ } ``` 然而，这种方法只适用于基于WebKit的浏览器。对于Firefox和其他非WebKit浏览器，我们需要使用不同的方法。Firefox支持`scrollbar-width`和`scrollbar-color`属性来定制滚动条，隐藏...

    纯js实现横向，纵向滚动条

    本文将深入探讨如何使用纯JavaScript实现横向和纵向滚动条，并确保其在现代浏览器中的兼容性。 首先，我们要理解滚动条的基本结构。滚动条通常由两个部分组成：一个水平的滚动条（用于横向滚动）和一个垂直的滚动条...

    jQuery+CSS3横向纵向滚动条代码.rar

    标题中的“jQuery+CSS3横向纵向滚动条代码”是指一种结合了JavaScript库jQuery和CSS3技术实现的网页滚动条解决方案。这种解决方案旨在提供更美观、更可定制的滚动条样式，以替代浏览器默认的滚动条设计，使得网页的...

    jsp中为表格添加水平滚动条的方法

    在网页设计中，有时我们需要在表格中添加水平滚动条以便在数据过多时用户可以方便地浏览。在JSP（JavaServer Pages）中，这可以通过HTML和CSS，以及可能的JavaScript来实现。以下是一个详细的步骤来解释如何在jsp...

    textarea去掉滚动条 textarea横向或纵向滚动条的去掉方法

    具体来说，去除滚动条可以分为三种情况：隐藏横向滚动条、隐藏纵向滚动条以及同时隐藏横向和纵向滚动条。 首先，需要了解的是如何使用CSS的overflow属性来控制滚动条的显示。在textarea的style属性中，overflow-x和...

    gridview固定表头 横向滚动 纵向固定

    "GridView固定表头横向滚动纵向固定" GridView是一个基于ASP.NET的数据控件，用于显示数据表格。然而，在默认情况下，GridView的表头无法固定在屏幕上，使得用户体验不佳。为了解决这个问题，本文将介绍如何实现...

    易语言按钮滚动条

    在“易语言按钮滚动条”这个主题中，我们主要探讨的是如何在易语言环境中实现一个带有滚动条的按钮组件，并且该组件能够支持按钮的移动操作。 在Windows应用程序开发中，滚动条是一个常见且重要的控件，它允许用户...

Magicbox
Global site tag (gtag.js) - Google Analytics