CSS 锁定TABLE表头

最新推荐文章于 2022-06-01 14:51:26 发布
最新推荐文章于 2022-06-01 14:51:26 发布
阅读量5.1k 收藏
点赞数
分类专栏： CSS 文章标签： CSS HTML 锁定 TABLE 表头 
<html> 
<head> 
<meta   http-equiv= "Content-Type "   content= "text/html;   charset=gb2312 "> 
<title> 锁定表头 </title> 
<style type="text/css"> 

.fixedHeaderTr   
{ 
z-index:10; 
position:relative;   
top:expression(this.offsetParent.scrollTop);   
};   

.relativeTag 
{ 
position:relative;   
}; 

.fixedHeaderCol   
{ 
background-color:#cccccc; 
position:relative;   
left:expression(this.parentElement.offsetParent.scrollLeft);   
};   

.mainDiv   
{   
overflow:auto;   
scrollbar-face-color:9999ff; 
height:expression((document.body.clientHeight-this.offsetTop-20> this.children[0].offsetHeight)?(this.children[0].offsetHeight+20)   :   (document.body.clientHeight-this.offsetTop-20));   
width:expression(document.body.clientWidth-20);   
} </style> 
</head> 

  <body> 
<br> 

<br> 
    <div   class= "mainDiv "   id=mailContainerDiv> 
          <table   width= "100% "   cellspacing=0   border=1   style= "margin-top:-2;margin-left:-1 "> 
          <TR   class= "fixedHeaderTr "   style= "background:navy;color:white; "> 
          <TD   nowrap   class= "fixedHeaderCol "   style= "background:navy;color:white; "> Header   A </TD> 
          <TD   nowrap   class= "fixedHeaderCol "   style= "background:navy;color:white; "> Header   B </TD> 
          <TD   nowrap> Header   C </TD> 
          </TR> 
          <TR   class= "relativeTag "   > 
          <TD   class= "fixedHeaderCol "   > A </TD> 
          <TD   class= "fixedHeaderCol "   > B </TD> 
          <TD   nowrap   > 
 <br> 
</TD>
          </TR   > 
          <TR   class= "relativeTag "   > 
          <TD   class= "fixedHeaderCol "   > A </TD> 
          <TD   class= "fixedHeaderCol "> B </TD> 
          <TD> C </TD> 
          </TR> 
          <TR   class= "relativeTag "   > 
          <TD   class= "fixedHeaderCol "   > A </TD> 
          <TD   class= "fixedHeaderCol "> B </TD> 
          <TD> C </TD> 
          </TR> 
          <TR   class= "relativeTag "   > 
          <TD   class= "fixedHeaderCol "   > A </TD> 
          <TD   class= "fixedHeaderCol "> B </TD> 
          <TD> C </TD> 
          </TR> 
          <TR   class= "relativeTag "   > 
          <TD   class= "fixedHeaderCol "   > A </TD> 
          <TD   class= "fixedHeaderCol "> B </TD> 
          <TD> C </TD> 
          </TR> 
          <TR   class= "relativeTag "   > 
          <TD   class= "fixedHeaderCol "   > A </TD> 
          <TD   class= "fixedHeaderCol "> B </TD> 
          <TD> C </TD> 
          </TR> 
          <TR   class= "relativeTag "   > 
          <TD   class= "fixedHeaderCol "   > A </TD> 
          <TD   class= "fixedHeaderCol "> B </TD> 
          <TD> C </TD> 
          </TR> 
          <TR   class= "relativeTag "   > 
          <TD   class= "fixedHeaderCol "   > A </TD> 
          <TD   class= "fixedHeaderCol "> B </TD> 
          <TD> C </TD> 
          </TR> 
          <TR   class= "relativeTag "   > 
          <TD   class= "fixedHeaderCol "   > A </TD> 
          <TD   class= "fixedHeaderCol "> B </TD> 
          <TD> C </TD> 
          </TR> 
          </table> 

    </div> 
  </body> 
</html>


 

小鸿叔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css实现table锁定表头
muyi8805的专栏
07-13 8093
在做项目中，碰到表格数据全部加载，不要分页，就需要锁定表头的业务。自己也上网搜了一些资料， 1.css+html实现 一般的思路就是两个table拼接，不过问题是上下表单可能对不齐 2.js实现 一般的思路是重新创建表头，表头浮动 在这里css+html实现：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.
HTML table表头在左侧,HTML Table锁定表头（CSS实现）
weixin_34091081的博客
06-02 2973
css+html实现固定表头#scrollTable {width:701px;border: 1px solid #EB8;/*table没有外围的border，只有内部的td或th有border*/background: #FF8C00;}#scrollTable table {border-collapse:collapse; /*统一设置两个table为细线表格*/}/*表头 div的第一...
table锁定表头
07-29 165
本文介绍4种固定表头方式，效果如图： 方式一、使用两个table，.tHead作为表头，tBody包含表体； <style type="text/css"> *{margin:0; padding:0;} table{width:100%; table-layout:fixed; border-collapse: collapse;} tr{height:3...
html table固定表头 css,使用css固定table表头
weixin_30396323的博客
07-01 732
这篇文章上次修改于 202 天前，可能其部分内容已经发生变化，如有疑问可询问作者。前言最近有个需求,渲染一个很复杂的table表格,不能用框架实现,使用原生table数据量一大就看不到表头需要固定表头,本篇文章当备份吧代码CodePen Demo.table-container {width: 50%;height: 200px;border: solid 1px #cccccc;margin: ...
Table冻结表头
qq_43248623的博客
10-26 645
Table冻结表头
最简单的纯css固定table的表头
yfx000的专栏
06-01 5094
页面table通常都需要做表头固定，参考了n种实现方式，最终还是选择了用纯css来做表头固定，只是因为方便，易于调试。
HTML、CSS锁定表头（无漂浮感）
03-20
接下来，我们将通过CSS实现表头锁定。这里我们使用`position: fixed`属性来创建一个固定定位的表头。由于固定定位会使元素脱离其正常文档流，因此需要对父容器进行一些调整，以确保表头下方的表格内容正常显示。 在...
table表头及表头列锁定
04-05
总的来说，"table表头及表头列锁定"是前端开发中的一个实用技巧，通过JavaScript和CSS的结合应用，可以提升用户在浏览长表格时的体验。`table_lock.js`文件很可能是实现这一功能的关键代码，其内部逻辑值得深入研究...
table表头及列固定
10-17
总的来说，通过HTML的`table`元素、CSS的定位属性和jQuery的事件处理，我们可以实现表头和列的固定，使得在长表格滚动时，关键信息始终保持可见。然而，这种方法可能需要针对不同浏览器和屏幕尺寸进行调整，以确保...
css固定表格头部
weixin_41141811的博客
06-25 1376
固定表头 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>固定表头</title> <style type="text/css"> *{ padding: 0; margin: 0; } html,body{ height: 100%; } .table-container {
table固定表头,css控制
08-20
两个例子table固定表头，用css实现，表头固定不动，表格内容随滚动条变化
css冻结表头冻结第一列
12-11
css样式冻结表头，右侧滚动条滑动，表头锁定不动； css样式冻结首列，下侧滚动条滑动，首列锁定不动； 另外，表中首列添加了复选框，css样式，仅供参考学习，可以根据情况改动 适合菜鸟初学，大神高手会觉得简单绕行
css+jquery完美实现table表头固定显示(浮动)
11-18
利用css和jquery实现table表头固定（浮动）显示，不复制表格内容，不更改页面元素，完全通过js设置样式来实现。
html锁定表头冻结行列
01-15
html锁定表头冻结行列html锁定表头冻结行列html锁定表头冻结行列html锁定表头冻结行列
利用js+css+html实现固定table的列头不动
11-26
话不多说，跟这小编来一起看下吧 1、CSS <style type="text/css"> #scroll_head { position: absolute; display: none; } </style> 2、Javascript [removed] //该函数在上面一个table数据加载完成后调用 //把表头的宽度设置到会滚动的页头去 var copyWidth = function () { var b = $('#data_tbody').prev().find('tr:last').fi
js、css实现table表头固定
奥特曼的小怪兽
03-09 1726
原生table表头随表体一起上下滚动 在html中利用js、css将表头固定，可将原table拆分，分为表头table，表体table。 大致框架如：<!--整体table--> <table> <tr> <td> <!--表头table--> <table> <!--只存放表头-->
css 设置冻结表格头,固定/冻结行表头、列表头的做法
weixin_39628256的博客
08-03 1139
本文只讲思路和注意事项。本文的固定行表头、列表头要比某些网站的复杂些，因为他们讲的是一个窗口中只有要滚动的表格，而我们是一个窗口中有很多内容，其他内容区域不动，只有表格滚动，同时表格的表头也固定。固定行表头固定行表头相对来说要简单得多。1、将表格放一个 div 中，为这个表格设置高度(如果想做随窗口而变化的自动高度，就用 position:absolute; bottom:xxxpx;……)。为这...
固定Table标题栏
likg_java的专栏
10-24 760
固定Table标题栏 .dataTable{ width: 100%; border-collapse:collapse; margin-bottom: 5px; color: #000000; } .dataTable .title{ background-color: #99CCFF; text-align: center; } 系统建议补货量
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
11-23
table表格完美指定固定行列方法，可以按照自己的需要定制自己的锁定列，只需要传入简单的几个参数即可，看完你会谢我的！如果不好使用的话可以联系我，我可以指导你们。测试过兼容的浏览器有谷歌，火狐，IE11！
css table 表头不动 内容滚动
最新发布
06-03
要实现表头不动，内容可滚动的效果，可以使用 CSS 的表格布局和固定定位。 首先，将表格布局设置为固定布局 `table-layout: fixed;`，然后将表头设置为固定定位 `position: fixed;`，并设置表头的宽度和每列单元格...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值