给表格加滚动条的思路

最新推荐文章于 2024-07-12 20:49:16 发布
最新推荐文章于 2024-07-12 20:49:16 发布
阅读量492 收藏
点赞数
分类专栏： java&script 文章标签： border table function class delete 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("我的收藏夹",["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.οnmοuseοver=rowOnMouseOver;
    theRow.οnmοuseοut=rowOnMouseOut;
    theRow.οnclick=rowOnClick;
    for(var i=0;i<colHeads.length;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");
}

</script>
</head>
<body οnlοad="init();">

</body>
</html> 

 
Suncanoe
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 表格纵向滚动条,纯css实现table的表头固定tbody内容显示垂直滚动条
weixin_35937871的博客
06-03 2290
最近在做项目是经常用到table表格来做数据统计，数据少时还好，但是数据多就会导致整个页面看起来乱，用户体验不好，为了使得用户体验更好，所以就会为table的内容上显示滚动条，这样即使再多的数据也不怕因为过多导致页面显示难看。实现的方法有很多，这里列举几个比较好的整理下来，作为一个学习笔记，也为需要的小伙伴提供思路。首先要明确我们需要完成的效果：1.固定表头2.table垂直滚动条3.table列...
layui静态表格设置滚动条_layui table表格 表头与内容列错位问题（只有纵向滚动条的情况） -...
weixin_39548968的博客
12-18 1907
thinkphp开发的一个项目，登录成功后又跳转到登录页面，在提交信息后输出session都是正常的，没有问题，但是页面跳转后，session出现丢失现象，无法正常完成登陆。通过查找资料，发现原来是bom头的原因。受COOKIE送出机制...版本2.4.5问题展示：存在问题：正好错位一个纵向滚动条的宽度思路：仔细观察th元素及th包裹的子元素div 如下图发现th宽度莫名的就多了5px 我就纳闷...
html 表格加滚动条
guoxiaohuivip的博客
02-22 1万+
思路： 1.表格放在Div中，设定Div的宽度和高度（不能用百分比），并设置纵向滚动条始终显示。 2.设定表格的宽度比Div小一个滚动条的宽度（如Div宽度为500，滚动条宽度为16，则表格的宽度应该设置为500-16=484）。 3.表格采用 thead,th标签            Header       1     Header       2
html body加滚动条,html-table tbody加滚动条
weixin_42340136的博客
06-09 594
思路就是1，把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto。2，把thead的tr设置成display:block。3，因为都设置成block所以要给td手动添加宽度 width:200px亲测有效IdNameCategoryMonthAmounthasBackUpscore23South BearingGlass/Material123...
HTML table表格 固定表头 tbody加滚动条
热门推荐
沐枫
12-31 1万+
纯CSStable表格thead固定tbody滚动效果 由于项目需要，在表格中，当数据量越来越多时，就会出现滚动条，而在滚动的过程中，默认情况下表格头部会跟着表格内容一起滚动，导致看不到头部对应的字段名，影响体验效果！ 实现思路： 将内容要滚动的区域控制在 tbody 标签中添加 overflow-y:auto; 样式，给 tr 标签添加table-layout:fixed;...
html多行文本框加滚动条,textbox多行带滚动条
weixin_34379088的博客
06-03 3838
textbox允许有滚动条的属性是什么？首先设置成TextMode=MultiLine; 再右边属性查找ScrollBars 设置为 Vertical 或者bothC# textbox多行时如何让它显示到最下面(已经有滚就像QQ聊天窗体一样~要让它停留在最下面C#怎么给多行文本框添加滚动条?在文本框的属性栏里，选择ScrollBars，有Horizontal(水平滚动条)，Vertical(竖直滚...
前端 滚动条 的思路
kmh0228的博客
02-19 2693
前端 滚动条 的思路之前思路现在思路布局说明插件 之前思路 之前写的滚动条插件,对滚动条的定义是,有个起始值,一个终点值, 滚动条表达一个在这个起终点之间的一个固定范围大小的区间, 这样就有了好多个参数,写的组件定义的时候要给个起值,终值,滚动条当前的值,滚动条代表的范围 等等一大堆的参数,并且在插件编写的时候滚动条的位子考虑,滚动事件和拖拽事件的处理都比较麻烦 现在思路 前段时间从另一个思路想了...
html 设置纵向滚动条,如何用CSS给tbody加垂直滚动条
weixin_39589693的博客
05-30 370
思路就是1，把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto。2，把thead的tr设置成display:block。3，因为都设置成block所以要给td手动添加宽度 width:200px代码如下：代码如下：IdNameCategoryMonthAmounthasBackUpscore23South BearingGlass/Mater...
java 表格加滚动条
guo_xiao_hui的专栏
05-30 2609
思路： 1.表格放在Div中，设定Div的宽度和高度（不能用百分比），并设置纵向滚动条始终显示。 2.设定表格的宽度比Div小一个滚动条的宽度（如Div宽度为500，滚动条宽度为16，则表格的宽度应该设置为500-16=484）。 3.表格采用 thead,th标签            Header       1
html 滚动条_HTML table表格 固定表头 tbody加滚动条
weixin_39520775的博客
11-23 273
纯CSS table表格 thead固定 tbody滚动效果由于项目需要，在表格中，当数据量越来越多时，就会出现滚动条，而在滚动的过程中，默认情况下表格头部会跟着表格内容一起滚动，导致看不到头部对应的字段名，影响体验效果！实现思路：将内容要滚动的区域控制在 tbody 标签中添加 overflow-y: auto; 样式，给 tr 标签添加 table-layout:fixed; (这是核心)样式...
用css给tbody加垂直滚动条的具体思路及样式代码
12-13
在网页设计中，有时我们需要对表格的 tbody 部分添加垂直滚动条，以便当数据过多时，用户可以轻松地浏览和查看所有信息。这里我们将详细介绍如何使用 CSS 实现这一功能，并提供相应的代码示例。 首先，理解核心思路...
javascript 带有滚动条的表格,标题固定,带排序功能.
10-29
带有滚动条的表格,标题固定,带排序功能. 虽然经测试有点问题，但编程思路很清晰，需要的朋友可以参考下。
利用纯css实现table固定列与表头中间横向滚动的思路和实例
09-24
本篇文章主要探讨如何利用纯CSS实现table固定列与表头，同时在中间部分添加横向滚动条，以确保用户体验。 首先，我们面临的问题是表格内容因列数过多而产生换行，这影响了视觉效果。为了解决这个问题，可以使用CSS...
基于vue实现web端超大数据量表格的卡顿解决
12-02
- **表格结构**：将表格分为三部分：表格顶部(top)、表格滚动区域(screen)和表格底部(bottom)。 - **计算属性**：利用计算属性来动态计算top和bottom的高度，以及根据滚动位置加载数据。 - **滚动事件处理**： -...
【React】手写虚拟化无限滚动组件
01-08
例如，通过计算滚动条位置与元素总高度的余数，可以得到当前元素在滚动条中的相对位置，进一步计算出需要减去的距离，使得滚动更加平滑。 3. **闪屏优化**： 这是实现过程中最复杂的问题。当监听滚动事件并在其中...
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1113
title>充电效果
JS之防抖和节流
喵喵的博客
07-09 1008
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定。当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。固定周期内，只执行一次动作，若没有新事件触发，不执行。
HTML 学习指南：从入门到精通
英英的博客
07-09 403
HTML（HyperText Markup Language）是构建网页的框架。掌握HTML不仅能更好的理解网页的结构，还能为进一步学习CSS、JavaScript等前端技术打下坚实的基础。本篇文章将为你规划一条从HTML入门到精通的学习路线，并概述每个阶段的核心内容。
html转markdown nodejs实现
学习使我快乐_玉祥
07-09 248
用到了jsdom库，直接现成处理html标签结构，只需要关心format格式化样式即可。比较简易，待后续优化，目前只是短时间批量转换html文件。
css给表格添加滚动条
04-04
在CSS中，可以使用overflow属性为表格添加滚动条。具体操作如下： 1. 将表格包裹在一个div中，并设置div的宽度和高度，超出部分将自动出现滚动条。 ``` <div class="table-container"> <table> <!-- 表格内容 --> </table> </div> ``` 2. 在CSS中为div设置overflow属性，并将其设为auto或scroll。 ``` .table-container { width: 500px; height: 300px; overflow: auto; } ``` auto表示当表格内容超出div的尺寸时才会出现滚动条，而scroll则表示无论表格内容是否超出div的尺寸，都会出现滚动条。 完整的示例代码如下： ``` <style> .table-container { width: 500px; height: 300px; overflow: auto; } </style> <div class="table-container"> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>25</td> <td>男</td> </tr> <tr> <td>李四</td> <td>30</td> <td>男</td> </tr> <tr> <td>王五</td> <td>27</td> <td>女</td> </tr> <!-- 表格内容省略 --> </tbody> </table> </div> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值