CSS实现固定表头 HTML表格

最新推荐文章于 2024-08-13 17:19:23 发布
最新推荐文章于 2024-08-13 17:19:23 发布
阅读量3.1k 收藏
点赞数
分类专栏： Javascript CSS 文章标签： html css stylesheet table border div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunyujia/article/details/2095999
版权
< html >
< head >
< title ></ title >
< link  rel ="stylesheet"  href ="demo.css"  type ="text/css" >
</ head >
< body >
< p > 这段空间的高度会自动计算 </ p >
< div  id ="lockedDiv" >
< table   width ="100%"  border ="0"  cellspacing ="0" >
   < tr >
     < th > a </ th >
     < th > b </ th >
     < th > c </ th >
     < th > d </ th >
     < th > e </ th >
     < th > f </ th >
     < th > g </ th >
   </ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
   < tr >< td > 1 </ td >< td > 2 </ td >< td > 3 </ td >< td > 4 </ td >< td > 5 </ td >< td > 6 </ td >< td > 7 </ td ></ tr >
</ table >
</ div >
</ body >
</ html >

BODY  {
    overflow-y : auto ;
}

div#lockedDiv {
    width :  100% ;
    height :  expression(document.body.offsetHeight-document.getElementById("lockedDiv").offsetTop-25) ;
    overflow :  auto ;
}
div#lockedDiv table th, th.locked {
    position : relative ;
    top :  expression(document.getElementById("lockedDiv").scrollTop) ;
    z-index :  20 ;
    font-family :  "宋体" ;
    font-size :  12px ;
    font-style :  normal ;
    font-weight :  bold ;
    text-align :  center ;
    vertical-align :  middle ;
    height :  22px ;
    background-color :  #DAECC8 ;
    white-space :  nowrap ;
    border-left :  1px solid silver ;
    border-top :  1px solid silver ;
    border-bottom :  1px solid silver ;
}
div#lockedDiv table {
    border-right :  1px solid silver ;  
 }
div#lockedDiv table TD  {
    height :  22px ;
    font-family :  "宋体", "Arial", "Helvetica" ;
    font-size :  12px ;
    border-left :  1px solid silver ;
    border-bottom :  1px solid silver ;
}

 最近发现在一些特定条件下,诸如同态构建表格的时候,会有问题所以稍微改动了一下

 

BODY  {
    overflow-y : auto ;
}

div#lockedDiv {
    overflow :  auto ;
    position : absolute ;
    padding : 0 ;
    margin : 0 ;
    width :  expression(document.body.offsetWidth-16) ;
    height :  expression(document.body.offsetHeight-document.getElementById("lockedDiv").offsetTop-25) ;
}
div#lockedDiv table th {
    position : relative ;
    top :  expression(document.getElementById("lockedDiv").scrollTop) ;   /* IE5+ only */
    z-index :  20 ;
    font-family :  "宋体", "Arial", "Helvetica" ;
    font-size :  12px ;
    font-style :  normal ;
    font-weight :  bold ;
    text-align :  center ;
    vertical-align :  middle ;
    height :  22px ;
    background-color :  #DAECC8 ;
    white-space :  nowrap ;
    border-left :  1px solid silver ;
    border-top :  1px solid silver ;
    border-bottom :  1px solid silver ;
}
div#lockedDiv table {
    margin : 0 ;
    border-right :  1px solid silver ;  
 }
div#lockedDiv table TD  {
    height :  22px ;
    font-family :  "宋体", "Arial", "Helvetica" ;
    font-size :  12px ;
    border-left :  1px solid silver ;
    border-bottom :  1px solid silver ;
}
div#lockedDiv table TD.STD  {
    height :  22px ;
    font-family :  "宋体", "Arial", "Helvetica" ;
    font-size :  12px ;
    font-style :  normal ;
    font-weight :  bold ;
    background-color :  #DAECC8 ;
    text-align :  center ;
    border-left :  1px solid silver ;
    border-bottom :  1px solid silver ;
}
sunyujia
关注
专栏目录
html table 固定表头和列
09-21
html table 固定表头和列，下载后，运行index.html页面即可看到效果。
纯CSS实现表头固定
weixin_33843947的博客
03-06 508
纯CSS实现表头固定之所以难，主要在两点。一是占有最大市场份额的IE6不支持position:fixed。另一个，是人们想破头都想在一起表格中实现这种效果。不过外国真的人用纯CSS实现了这种效果，动用了数量惊人的CSS hacks……我觉得，如果搞到代码如此难懂且难扩展，还不如用javascript好了。碰巧今天我也遇到这种需求，换个视角想想，真的搞出来了。 我们知道，CSS是负责表现，HTML...
在HTML中固定表格表头的简单方法
最新发布
yivifu的专栏
08-13 748
表文介绍了一种不使用JavaScrip也不用第三方插件简单实现在HTML页面中固定表头滚动表格的效果。
HTML表格固定表头的做法
鸡仔哥的专栏
03-22 935
HTML表格固定表头的做法(only for IE)： .FixedTitleRow { position: relative; top: expression(this.offsetParent.scrollTop); z-index: 10; background-color: white; } .Fi
固定表头的CSS
信手涂鸦
11-23 715
抄别人的，留在自己的上面，以便查：     Header A     Header B     Header C 爽！http://dev.csdn.net/develop/article/51/51972.shtm
超简单纯css固定表头
03-27 454
* 隐藏滚动条*************************************************** */
css固定table表头的实现代码可同时看到表头和表格底部
09-25
使用CSS固定表格表头的技术可以通过多种实现方式完成。此处提供了两种方法的代码示例，让我们来深入探讨这些技术点。 首先，来看第一种实现方法。通过使用一个外层的div容器来包裹table元素，并设置div容器的...
纯CSS实现表头固定表格滚动条效果
12-24
表格应该分为两部分：固定表头和可滚动的主体。可以这样编写： ```html 列1 列2 <!-- 更多列... --> 数据1 数据2 <!-- 更多行... --> <!-- 更多行... --> ``` 接下来，我们将使用CSS来...
HTML table表头固定
普罗旺斯
09-27 1442
【代码】HTML table表头固定。
css固定表头
weixin_33981932的博客
12-17 94
2019独角兽企业重金招聘Python工程师标准>>> ...
HTML5_html表格表头固定不滚动内容滚动.rar
07-10
HTML5_html表头固定不滚动而内容滚动的效果，表格是基于Div CSS实现的，将表头固定住不滚动，而表格里面的每行数据随滚动条滚动。在显示较多数据时，当用户滚动鼠标中轮时，表格内容会滚动，而表头固定不变，可以将表格内容与表头很好的对应，便于阅读表格内容。
html Table 表头固定的实现
09-22
主要介绍了html Table 表头固定的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
html 固定表头 （上下，左右，缩放均支持，代码简单）
04-09
html 固定表头 （上下，左右，缩放均支持，代码简单）
HTML Table固定表头完美实现
03-16
NULL 博文链接：https://ado88.iteye.com/blog/437305
CSS固定表头
说故事的五公子
08-08 272
CSS固定表头 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <ti
css 固定表头
u010865136的专栏
04-03 708
表明该元素将固定在距离视口顶部的位置，即保持在屏幕的顶部。这通常用于实现类似固定表头、固定导航栏等效果。类名的元素设置为粘性定位（sticky positioning），并让其距离视口顶部（top）为 0。页面条数太多，下滑动时，表头上去了，想要将表头固定在顶部，锁住表头。粘性定位使得元素在滚动到特定位置时会固定在屏幕上。表格表头那一行tr中添加如下属性。，这段代码的作用是将具有。
如何实现 HTML/CSS 中的表头固定
CbrFullstack的博客
10-01 493
在 Web 开发中，有时候我们需要在表格中固定表头，以便在滚动表格内容时仍然能够看到表头信息。的高度设置为一个固定值（例如 300px），并将其设置为具有垂直滚动条的可滚动区域。通过将上述 CSS 代码添加到你的样式表中，并将 HTML 结构与表格一起使用，你就可以实现一个具有固定表头的表格了。接下来，我们将使用 CSS 来实现表头固定的效果。首先，我们需要一个包含表格的 HTML 结构。我们还设置了表头的背景颜色，以使其与表格内容区分开来。元素的定位为固定定位，并将其置于表格容器的顶部（
纯CSS实现的HTML固定表头表格教程
"这篇教程介绍了如何使用CSS来...这个CSS实现的固定表头HTML表格方案简化了代码，提高了可维护性，并考虑了浏览器兼容性。开发者可以根据自己的需求进行调整，如改变颜色、字体、边框等样式，以适应不同的设计要求。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值