固定表头的Table

最新推荐文章于 2023-03-16 15:55:34 发布
最新推荐文章于 2023-03-16 15:55:34 发布
阅读量441 收藏
点赞数
分类专栏： html(css) 文章标签： table function border delete class url
 <html>  
  <head>  
  <title>我的表格</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>
xuerufan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生列表table固定表头
千山雪的博客
12-07 2239
原生列表table固定表头 将 table 的 thead 和 tbody 拆分成两个表格，用 div 包起来，给 div 设置固定高度和 overflow: auto; 属性（其实只给 tbody 的 table 包上 div 就可以）。 <table class="bordered tTable"> <thead> ...
自定义固定table表头
ZZHK666的博客
10-11 433
自定义固定table长表头
table 表头固定
github_38186390的博客
09-27 1949
一。table 表头固定说明。我们将表头和表内容分成两个表格就可以解决该问题。 二。代码。 css代码：里面定死的宽高只是为啦方便看效果，实际中需要使用js计算出来。 * { box-sizing: border-box; } .table { border: 1px solid #efefef; ...
Table固定表头
Jim~LoveQ的博客
09-04 1250
Table固定表头的方法： 1. 纯`CSS`方式 2. 使用`bootstrap-table`方式
HTML table表头固定
缘如风的博客
01-02 5723
实现表格表头的固定，采用纯css的方式 具体如下 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>HTML table表头固定</title> <styl...
table固定表头
bluelotos893的博客
09-01 7196
设置table表头固定
table 固定表头
weixin_51666715的博客
03-16 1263
可以直接通过给组件一个最大高度然后通过穿透获取thead使用·position:sticky·固定头部即可。
html table固定表头
weixin_42064877的博客
05-07 2531
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 4px; } ::-webkit-scrollbar { width: 6px; height: 6px; background-color: transparent; borde..
table表格固定表头
weixin_54366356的博客
06-04 5941
table表格内容过多时会出现滚动，若不固定表头的话，当滚动到下方时即看不见每一列所对应的标题，影响用户体验！ 废话不多说，直接上代码！！！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-
table 表格 实现固定表头
weixin_44099519的博客
09-11 407
现在有很多UI框架都封装好了table的各种使用方法，这里记录一下，不用UI框架怎么实现表头固定。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style&gt...
固定表头table
05-21
固定表头table,实现table固定行列
html Table 表头固定的实现
09-22
主要介绍了html Table 表头固定的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
eleFixed-master_Table_固定表头_
10-02
eleFixed是一款非常简单的使用动画来固定元素的插件（最常见的作用就是固定table的thead）它可以同时固定多个HTMLElement而不用额外监听多个事件，而且你也可以随时删除某一个监听对象或者直接把eleFixed从你的网页...
JS实现table表格固定表头且表头随横向滚动而滚动
10-19
主要介绍了JS实现table表格固定表头且表头可以随横向滚动而滚动,需要的朋友可以参考下
固定table的thead表头
11-11
固定table的thead表头
QT5开发及实例配套源代码.zip
05-28
QT5开发及实例配套[源代码]，Qt是诺基亚公司的C++可视化开发平台，本书以Qt 5作为平台，每个章节在简单介绍开发环境的基础上，用一个小实例，介绍Qt 5应用程序开发各个方面，然后系统介绍Qt 5应用程序的开发技术，一般均通过实例介绍和讲解内容。最后通过三个大实例，系统介绍Qt 5综合应用开发。光盘中包含本书教学课件和书中所有实例源代码及其相关文件。通过学习本书，结合实例上机练习，一般能够在比较短的时间内掌握Qt 5应用技术。本书既可作为Qt 5的学习和参考用书，也可作为大学教材或Qt 5培训用书。
grpcio-1.46.3-cp37-cp37m-musllinux_1_1_i686.whl
最新发布
05-28
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
大学生毕业答辨ppt免费模板【不要积分】下载可编辑可用(138).zip
05-28
大学生毕业答辨ppt免费模板【不要积分】下载可编辑可用(138).zip
Eclipse的C/C++自动补全插件org.eclipse.cdt.ui-7.3.100.202111091601
05-28
Eclipse的C/C++自动补全插件,制作参考:https://blog.csdn.net/kingfox/article/details/104121203?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-1-104121203-blog-117118786.235%5Ev43%5Epc_blog_bottom_relevance_base1&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-1-104121203-blog-117118786.235%5Ev43%5Epc_blog_bottom_relevance_base1&utm_relevant_index=2

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值