<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>
分享到：
相关推荐
根据fly社区给出的解释，横向滚动条出现的原因主要是因为数据表格的渲染有时会在浏览器的纵向滚动条出现之前完成。在这种情况下，浏览器会强制减少滚动条宽度的差，一般约为17px，从而导致横向滚动条的出现。这个...
在网页设计中，有时我们需要对表格的 tbody 部分添加垂直滚动条，以便当数据过多时，用户可以轻松地浏览和查看所有信息。这里我们将详细介绍如何使用 CSS 实现这一功能，并提供相应的代码示例。 首先，理解核心思路...
1. 表格滚动条实现：在网页上展示大量数据时，滚动条是一个必备的功能，使得用户可以滚动查看隐藏在视图之外的数据。在HTML中，可以通过设置容器div的CSS属性`overflow: auto;`来让div内部的元素，如表格，支持滚动...
`GetScrollPos`在这里的作用是获取滚动条的当前位置，这有助于确定表格的可视范围。 要实现这个功能，首先需要监听鼠标移动事件，然后在事件处理函数中调用`GetScrollPos`。函数返回的值可以用来计算鼠标相对于表格...
标题和描述均提到了“21个新奇漂亮的AjaxCSS表格设计”，这...这些案例不仅展现了Ajax和CSS在表格设计中的应用潜力，也提供了丰富的设计思路和技术实现方案，对于网页设计师和前端开发者来说，是一份宝贵的学习资源。
然而，当表格内容过多时，滚动条的出现会导致表头（thead）随着滚动消失，影响用户的阅读体验。为了解决这个问题，开发者通常会采用“表格头部第一行下拉固定”的技术，使得在滚动查看表格内容时，表头始终保持可见...
本篇文章主要探讨如何利用纯CSS实现table固定列与表头，同时在中间部分添加横向滚动条，以确保用户体验。 首先，我们面临的问题是表格内容因列数过多而产生换行，这影响了视觉效果。为了解决这个问题，可以使用CSS...
在这个“易语言高级表格滚动分页显示源码”中，我们可以深入理解易语言在处理数据展示和用户交互方面的高级技巧。 在易语言中，表格组件通常用于显示大量结构化数据，如数据库记录或报表。高级表格滚动分页显示功能...
1. **内容区域div**：这个div包含整个表格，用户可以通过滚动条查看所有的行和列。 2. **顶部锁定div**：用于固定表格的顶部行，即使用户向下滚动，这些行也会保持可见。 3. **左侧锁定div**：用于固定表格的左侧列...
3. **滚动条被拉动**：当用户操作滚动条时，需要有相应的事件处理机制来响应这个动作。在易语言中，这通常涉及到事件函数的编写，比如`滚动条.拉动`事件。源码会展示如何捕获并处理这个事件，以及如何更新滚动框的...
在Qt中，这可以通过重写视图的scrollBarValueChanged()信号与调整滚动条的槽函数来实现。当滚动时，冻结的行或列始终保持在可视区域的顶部或左侧。 3. **设置字体**：Qt的QTableWidgetItem或QTableWidgetItem::...
`保证显示.ec`文件很可能是易语言的一个扩展组件，提供了更丰富的表格控件功能，比如自适应大小、滚动条处理、单元格格式化等。使用这样的扩展库可以极大地提高开发效率，同时也能提供更好的用户界面体验。 在...
例如，可以创建一个自定义的控件，通过滚动条控制图片的显示部分，这样只需要在屏幕可见区域加载图片的部分，而不是一次性加载整个大图片，从而节省系统资源。 其次，源码是学习和理解这一另类思路的关键。在提供的...
例如，通过计算滚动条位置与元素总高度的余数，可以得到当前元素在滚动条中的相对位置，进一步计算出需要减去的距离，使得滚动更加平滑。 3. **闪屏优化**： 这是实现过程中最复杂的问题。当监听滚动事件并在其中...
2、和我的文章有点出入，因为在使用过程中优化了一些，在这里我放进去两个版本的表格，一个好看一些（带滚动条，序号和操作栏固定不动，只拉动内容的），一个就是普通的功能（方便知道思路）； 3、表格有问题可以...
滚动区域则根据滚动条位置加载和卸载数据。 2. **计算属性的应用**：使用Vue的计算属性来计算顶部和底部的高度，以及决定何时加载新数据。滚动事件触发时，根据滚动位置、总数据量和屏幕可见数据量来更新这两个部分...
2. **交互设置**：Axure RP8允许设计师设置特定的交互规则，例如，当用户滚动表格时，每一行的背景色根据奇偶性自动切换。 3. **样式定义**：文件可能会有CSS样式的定义，定义奇数行和偶数行的不同背景颜色。 4. **...
数据行中的每个单元格也需要订阅这个观察者，当它们接收到滚动事件时，会更新自身的滚动条位置，以保持与列头的滚动位置一致。这样，无论用户是在列头还是数据行区域触摸并滚动，整个表格都会呈现出一致的滚动行为。...
当表格太宽，需要横向滚动时，我们希望固定第一列（或更多列）不随滚动条移动，而其他列则可以滚动。这需要我们动态地改变这些列的位置属性，使其相对于视口保持固定。 在HTML中，创建一个包含多个列的表格，可以...