HTML表格固定表头的做法

最新推荐文章于 2023-01-28 10:32:30 发布
最新推荐文章于 2023-01-28 10:32:30 发布
阅读量860 收藏
点赞数
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/congling_0856/article/details/8706913
版权
HTML表格固定表头的做法(only for IE)： 

<html>
  <head>
    <style>
		.FixedTitleRow {
		    position: relative;
		    top: expression(this.offsetParent.scrollTop);
		    z-index: 10;
		    background-color: white;
		}
		 
		.FixedTitleColumn {
		    position: relative;
		    left: expression(this.parentElement.offsetParent.scrollLeft);
		    font-family: "arial", "helvetica", "sans-serif";
		    font-size: 9pt;
		    font-weight: bold;
		    color: #30608F;
		    padding-right: 3px;
		    padding-left: 3px;
		    line-height: 15pt;
		    background-color: #B7E6FF;
		    cursor: default
		}
		 
		.FixedDataColumn {
		    position: relative;
		    left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
		    font-family: "arial", "helvetica", "sans-serif";
		    font-size: 9pt;
		    font-weight: bold;
		    color: #30608F;
		    padding-right: 3px;
		    padding-left: 3px;
		    line-height: 15pt;
		    background-color: #B7E6FF;
		    cursor: default
		}
		
		.cell-label {
		    font-family: "arial", "helvetica", "sans-serif";
		    font-size: 9pt;
		    font-weight: bold;
		    color: #30608F;
		    padding-right: 3px;
		    padding-left: 3px;
		    line-height: 15pt;
		    background-color: #B7E6FF;
		    cursor: default
		}
		
		.cell-data {
		    font-family: "arial", "helvetica", "sans-serif";
		    font-size: 9pt;
		    color: #000000;
		    padding-right: 3px;
		    padding-left: 3px;
		    line-height: 15pt;
		    background-color: #E1F4FF;
		    cursor: default
		}
	</style>
  </head>

  <body>
    <div style="position:absolute; top:10px; left:10px; width:300px; height:150px; z-index:0; overflow:auto">
		<table width="700px" cellpadding="1" cellspacing="1" border="1" >
		  <tr class="FixedTitleRow">
		    <td class="FixedTitleColumn">Title</td>
		    <td class="cell-label">Title1</td>
		    <td class="cell-label">Title2</td>
		    <td class="cell-label">Title3</td>
		    <td class="cell-label">Title4</td>
		  </tr>
		  
		  <tr>
		    <td class="FixedDataColumn">A Grade</td>
		    <td class="cell-data">Data 1</td>
		    <td class="cell-data">Data 2</td>
		    <td class="cell-data">Data 3</td>
		    <td class="cell-data">Data 4</td>
		  </tr>

		  <tr>
		    <td class="FixedDataColumn">B Grade</td>
		    <td class="cell-data">Data 1</td>
		    <td class="cell-data">Data 2</td>
		    <td class="cell-data">Data 3</td>
		    <td class="cell-data">Data 4</td>
		  </tr>
		  
		  <tr>
		    <td class="FixedDataColumn">C Grade</td>
		    <td class="cell-data">Data 1</td>
		    <td class="cell-data">Data 2</td>
		    <td class="cell-data">Data 3</td>
		    <td class="cell-data">Data 4</td>
		  </tr>
		  
		  <tr>
		    <td class="FixedDataColumn">D Grade</td>
		    <td class="cell-data">Data 1</td>
		    <td class="cell-data">Data 2</td>
		    <td class="cell-data">Data 3</td>
		    <td class="cell-data">Data 4</td>
		  </tr>
		  
		  <tr>
		    <td class="FixedDataColumn">E Grade</td>
		    <td class="cell-data">Data 1</td>
		    <td class="cell-data">Data 2</td>
		    <td class="cell-data">Data 3</td>
		    <td class="cell-data">Data 4</td>
		  </tr>
		  
		  <tr>
		    <td class="FixedDataColumn">F Grade</td>
		    <td class="cell-data">Data 1</td>
		    <td class="cell-data">Data 2</td>
		    <td class="cell-data">Data 3</td>
		    <td class="cell-data">Data 4</td>
		  </tr>
		  
		  <tr>
		    <td class="FixedDataColumn">G Grade</td>
		    <td class="cell-data">Data 1</td>
		    <td class="cell-data">Data 2</td>
		    <td class="cell-data">Data 3</td>
		    <td class="cell-data">Data 4</td>
		  </tr>
		</table>
    </div>
  </body>
</html>




鸡仔哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
table原生固定表头和固定列实现
A good man
08-23 1130
【代码】table原生固定表头和固定列实现。
HTML表格
m0_52900946的博客
03-20 1429
表格是html5中的重要布局之一，包含的内容十分广泛，一般使用<table>标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 <tr>、<th> 或<td>元素组成表格, <tr>元素表示表格的行，<th>元素表示表头，<td> 元素定义单元格。 2.1 表格属性 <table border="1"> </table> <!-- 表示表格的边框宽度为1px
html table 固定表头和列
09-21
html table 固定表头和列，下载后，运行index.html页面即可看到效果。
HTML 表格
小宝儿的学习之路
07-04 190
文章目录1、HTML 表格2、HTML 表格和边框属性3、HTML 表格表头4、如何设置带有标题的表格5、跨行或跨列的表格单元格6、设置单元格边距7、设置单元格间距 学习资料来源于：HTML表格 1、HTML 表格 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。 数据单元格可以包含文本、图片、列表、段落、表单、水平线、
position: fixed实现固定表格自定义表头
wzy88123的博客
01-28 409
position: fixed实现固定表格自定义表头
vue表格实现固定表头首列
11-02
在Vue移动端项目中，开发人员经常遇到需要创建具备固定表头和首列的表格，以提供良好的用户体验。本文将详细讲解如何在不依赖任何UI框架或插件的情况下，利用Vue的核心特性实现这样一个功能。 首先，我们需要理解...
html Table 表头固定的实现
09-22
主要介绍了html Table 表头固定的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
表格固定表头
12-11
"表格固定表头"是一种解决这个问题的技术，它使得在滚动浏览长表格时，表头始终保持可见，方便用户跟踪列名。本文将深入探讨如何使用JavaScript实现这一功能，并提供一个简单的使用示例。 ### 一、JavaScript基础 ...
响应式表格之固定表头的简单实现
09-01
总之，实现响应式表格的固定表头涉及HTML结构的规划、CSS样式的设定以及JavaScript事件的处理。通过合理地组织这些元素，我们可以创建出一个既美观又实用的响应式表格，无论在何种屏幕尺寸下，都能提供清晰易读的...
html表头固定
12-01
在网页设计中，HTML表格是一种常见的数据展示方式。然而，当表格内容过多，需要滚动查看时，表头（thead）的固定就显得尤为重要，因为表头通常用来标识列的含义，固定它可以让用户在滚动浏览长表格时始终能看见列名...
html 表头固定及列固定
10-29
对网页中表格进行列及行的固定 有多重样式可充选择
移动端table固定表头与固定第一列
02-20
移动端项目，移动端table固定表头与固定第一列,HTML5和css3
HTML5_html表格表头固定不滚动内容滚动.rar
07-10
HTML5_html表头固定不滚动而内容滚动的效果，表格是基于Div CSS实现的，将表头固定住不滚动，而表格里面的每行数据随滚动条滚动。在显示较多数据时，当用户滚动鼠标中轮时，表格内容会滚动，而表头固定不变，可以将表格内容与表头很好的对应，便于阅读表格内容。
vue.js表格表头首行固定代码
07-24
在处理表格时，特别是在数据量大或者需要横向滚动的情况下，固定表头是一个常见的需求，以便用户在滚动查看表格内容时，表头始终保持可见，提供清晰的列标识。 首先，我们需要创建一个Vue组件来表示表格。这个组件...
解决layui表格的表头不滚动的问题
10-16
然而，在实际应用中，用户可能会遇到表格在数据过多时表头不滚动的问题，这使得用户在浏览长表格时无法清晰地看到表头信息。本文将详细介绍如何解决 layui 表格表头不滚动的问题。 首先，我们需要理解问题的核心...
table固定表头和首列
热门推荐
老虎帅呆了的博客
01-02 1万+
table固定表头和首列html部分，结构上分为左右两部分，又分别拆开为上下两部分，总共四个结构部分，以下为固定首行和首列，需要固定多行多列的可以自行添加，如下列表中姓名为左上角固定不变的位置，可自行添加多个。<div class="container"> <div id="left_div"> ***<!--左上角固定不变的位置-->*** <div id=
html设置表头格式
行善之人必有余庆
05-19 7191
设置表头格式 c管理表 物品名 类型 领取人 领取人所属部门 数量 圆珠笔 文具 李丽 PHP 1
通过样式表实现固定表头和列
qin123qq的专栏
12-13 392
固定表头和列 .FixedTitleRow { position: relative; top: expression(this.offsetParent.scrollTop); z-index: 10; background-color:
CSS教程,CSS固定表头的HTML表格
12-09
用CSS实现的固定表头的HTML表格。 曾经在项目中实现过一个固定表头的HTML表格，但使用了非常臃肿的代码，因为实际上是画了三个一样的表格。一个纯粹用HTML和CSS实现的固定表头的表格，其简化代码如下： <html ...
html表格，固定表头不动
最新发布
05-14
在HTML表格中，要固定表头不动，可以使用CSS中的position属性和z-index属性。 首先，在表格之前添加一个div，设置其样式为position:fixed，top:0，left:0，z-index:1，height:表头的高度，width:表格的宽度。这样就...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值