CSS固定表头

最新推荐文章于 2023-03-27 17:05:23 发布
最新推荐文章于 2023-03-27 17:05:23 发布
阅读量63 收藏
点赞数
分类专栏： CSS 文章标签： CSS HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xbdfbdsfbdsfbfdsbdsf/article/details/83645128
版权
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</HEAD>
<BODY>
<div style="height: 250px; overflow-Y: auto;width:500px">
<table border=1 width="100%">
<tr style="background-color:red;position:relative;top:expression_r(this.offsetParent.scrollTop-2);">
<td>Name</td>
<td>Age</td>
<td>Position</td>
<td>Income</td>
<td>Gender</td>
</tr>
<tr>
<td>John</td>
<td>37</td>
<td>Managing director</td>
<td>90.000</td>
<td>Male</td>
</tr>
<tr>
<td>Susan</td>
<td>34</td>
<td>Partner</td>
<td>90.000</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>29</td>
<td>Head of production</td>
<td>70.000</td>
<td>Male</td>
</tr>
<tr>
<td>Laura</td>
<td>29</td>
<td>Head of marketing</td>
<td>70.000</td>
<td>Female</td>
</tr>
<tr>
<td>Kate</td>
<td>18</td>
<td>Marketing</td>
<td>50.000</td>
<td>Female</td>
</tr>
<tr>
<td>Mona</td>
<td>21</td>
<td>Marketing</td>
<td>53.000</td>
<td>Female</td>
</tr>
<tr>
<td>Mike</td>
<td>21</td>
<td>Marketing</td>
<td>53.000</td>
<td>Male</td>
</tr>
<tr>
<td>Mark</td>
<td>25</td>
<td>Production</td>
<td>52.000</td>
<td>Male</td>
</tr>
<tr>
<td>Peter</td>
<td>33</td>
<td>Production</td>
<td>55.000</td>
<td>Male</td>
</tr>
<tr>
<td>Jennifer</td>
<td>24</td>
<td>Production</td>
<td>49.000</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>25</td>
<td>Photography</td>
<td>51.000</td>
<td>Male</td>
</tr>
<tr>
<td>Anna</td>
<td>42</td>
<td>Head of photography</td>
<td>56.000</td>
<td>Female</td>
</tr>
<tr>
<td>Rita</td>
<td>30</td>
<td>Photography</td>
<td>54.000</td>
<td>Female</td>
</tr>
<tr>
<td>Magnus</td>
<td>25</td>
<td>Freelancer</td>
<td>65.000</td>
<td>Male</td>
</tr>
<tr>
<td>Johnny</td>
<td>29</td>
<td>Freelancer</td>
<td>63.000</td>
<td>Male</td>
</tr>
<tr id="foot" height="20" style="background-color:green;color:white;position:relative;top:expression_r(this.offsetParent.scrollTop+this.offsetParent.clientHeight-this.offsetParent.scrollHeight);">
<td>合计</td>
<td>29</td>
<td> </td>
<td>63.000</td>
<td> </td>
</tr>
</table>
<script>
</script>
</div>
</BODY>
</HTML>
xbdfbdsfbdsfbfdsbdsf
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 表头列头固定(实用)
11-22
实现列头和行头的固定,非常实用,能让你尽可能的改变最少的代码实现要求的功能.
CSS实现多表头悬浮
01-25
当一个报表很长的时候可以固定表头，上下滑动的时候，让表头悬浮的。
超简单纯css固定表头
03-27 408
* 隐藏滚动条*************************************************** */
CSS实现固定首列和表头
__猫玖__的博客
02-16 2359
首行首列固定
css+jquery完美实现table表头固定显示(浮动)
11-18
利用css和jquery实现table表头固定（浮动）显示，不复制表格内容，不更改页面元素，完全通过js设置样式来实现。
css固定表头、行头样式代码
09-25
在给定的文件中，我们看到一个使用CSS实现固定表头和行头样式的示例。 首先，我们来理解一下这个示例的核心部分。`<style>`标签内定义了一系列CSS类，这些类用于设置特定元素的样式，以实现固定表头和行头的效果。 ...
CSS 固定表头和列
05-27
总之，实现CSS固定表头和列是提高数据表格可读性和用户交互性的重要手段。通过理解CSS定位原理并结合HTML结构，我们可以创建出符合需求的自定义解决方案。对于更复杂的应用场景，利用现有的JavaScript库可以提供更多...
css固定表头和列.html
01-11
css固定table表头和列，亲测可用
css固定table表头的实现代码可同时看到表头和表格底部
09-25
使用CSS固定表格表头的技术可以通过多种实现方式完成。此处提供了两种方法的代码示例，让我们来深入探讨这些技术点。 首先，来看第一种实现方法。通过使用一个外层的div容器来包裹table元素，并设置div容器的...
css 固定表头 拖动滚动条时对应表头所对应的列 ie6测试通过
09-25
总结来说，实现CSS固定表头主要依赖于定位技术和特定于浏览器的特性，如IE6的`expression`。虽然这种方法对于老版本浏览器是有效的，但在现代开发中，我们应该考虑使用更现代、更兼容的CSS技术，以确保更好的跨...
html的table滚动时固定首行和首列
11-26
html的table滚动时固定首行和首例，网上多为3个table拼合实现，现使用一个table实现
通过样式表实现固定表头和列
angelshm的专栏
05-19 471
html>head>    meta http-equiv="Content-Type" content="text/html; charset=gb2312">    title>固定表头和列title>    style>...        .FixedTitleRow        {...}{            position: relative;             top:
纯CSS实现表头固定
weixin_33843947的博客
03-06 490
纯CSS实现表头固定之所以难，主要在两点。一是占有最大市场份额的IE6不支持position:fixed。另一个，是人们想破头都想在一起表格中实现这种效果。不过外国真的人用纯CSS实现了这种效果，动用了数量惊人的CSS hacks……我觉得，如果搞到代码如此难懂且难扩展，还不如用javascript好了。碰巧今天我也遇到这种需求，换个视角想想，真的搞出来了。 我们知道，CSS是负责表现，HTML...
一种使用CSS固定表头和列的方法
weixin_34119545的博客
05-01 135
固定表头的CSS:thead th, thead th.locked {font-size: 14px;font-weight: bold;text-align: center;background-color: navy;color: white;border-right: 1px solid silver;position:relative;cursor: default; } thead t...
table表头和首列的表格固定-CSS实现的Table表头固定
qq_27954241的博客
07-04 3621
效果就是上图 表头是固定的， 跟随滑动轴动，左边第一列也是可以跟谁滑动轴滚动 下面是代码原文是查看 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta ...
利用CSS+DIV来固定table的行和列
yy6060
12-09 981
通过CSS和DIV实现一个表格出横纵向滚动条，并且让指定的列固定。多余的话就不说了，代码如下。                 .Freezing {        z-index: 10;         position: relative;         top: expression(this.offsetParent.scrollTop)    }    .Fr
html 纯CSS实现固定表头
pk5454754的博客
05-14 756
转载链接：《https://blog.csdn.net/hualele/article/details/52993315》table tbody {             display:block;             height:350px;             overflow-y:scroll;        }            table thead, tbody tr...
CSS固定列头，表头
天生我材必有用，千金散尽还复来
08-14 133
http://www.loveayang.com.cn/post/2008/04/e59bbae5ae9ae8a1a8e5a4b4e79a84CSSe5ae9ee78eb0.aspx   http://www.cnblogs.com/yourhoneysky/archive/2006/10/23/537403.html
锁定表头和固定列(Fixed table head and columns)
lein_wang的专栏
11-01 2008
http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html点击打开链接
css 表头固定不动
最新发布
05-26
要实现表头固定不动，可以使用 CSS 中的 `position: sticky` 属性。这个属性可以让元素在滚动到指定位置时停止滚动，并固定在屏幕上方或下方。 首先，需要给表格的表头添加一个 CSS 类，例如 `.fixed-header`。然后...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值