table中的标题行冻结的简单实现
这里只是简单的实现，主要是用了position属性的fixed属性值，这个属性值需要高版本浏览器的支持，如果要兼容低版本的浏览器可以通过写脚本的方式实现，也可以使用UI库，有些UI库里面表格插件的标题行都是冻结的。这里只介绍使用fixed的方法：
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div class="freezediv" style="width: 400px; height: 140px; overflow: auto;border:1px solid gray">
<table id="freezedivTable" cellpadding="" cellspacing="">
<tr id="fixTr" style="position: fixed; background-color:Yellow;">
<td style="width: 60px">
序号
</td>
<td style="width: 60px">
内容
</td>
</tr>
<tr>
<td>
序号
</td>
<td>
内容
</td>
</tr>
<tr>
<td style="width: 60px"> </td>
<td style="width: 60px">
内容1
</td>
</tr>
<tr>
<td> </td>
<td>
内容2
</td>
</tr>
<tr>
<td> </td>
<td>
内容3
</td>
</tr>
<tr>
<td> </td>
<td>
内容4
</td>
</tr>
<tr>
<td> </td>
<td>
内容5
</td>
</tr>
<tr>
<td> </td>
<td>
内容6
</td>
</tr>
<tr>
<td> </td>
<td>
内容7
</td>
</tr>
<tr>
<td> </td>
<td>
内容8
</td>
</tr>
<tr>
<td> </td>
<td>
内容9
</td>
</tr>
<tr>
<td> </td>
<td>
内容10
</td>
</tr>
<tr>
<td> </td>
<td>
内容11
</td>
</tr>
<tr>
<td> </td>
<td>
内容12
</td>
</tr>
<tr>
<td> </td>
<td>
内容13
</td>
</tr>
<tr>
<td> </td>
<td>
内容14
</td>
</tr>
<tr>
<td> </td>
<td>
内容15
</td>
</tr>
<tr>
<td> </td>
<td>
内容16
</td>
</tr>
<tr>
<td> </td>
<td>
内容17
</td>
</tr>
<tr>
<td> </td>
<td>
内容18
</td>
</tr>
<tr>
<td> </td>
<td>
内容19
</td>
</tr>
<tr>
<td> </td>
<td>
内容20
</td>
</tr>
</table>
</div>
</body>
</html>
table中的标题行冻结的简单实现的更多相关文章
- Table标题行冻结，数据行滚动的一种方式
这段时间在做Table标题行冻结,数据行滚动,虽然能实现,但也遇到一些问题,记录下来. 首先说说实现,实现其实不难,估计很多人都能想象出来,那就是标题行与内容行分离.我是这么做的,用两个表格,一个只有 ...
- Vue. 之 Element获取table中选中的行
Vue. 之 Element获取table中选中的行 问题描述: 如下截图,在Table中选择数据后,然后在点击“统计”按钮,获取Table表中选择的行 解决方案: 1. 给“统计”这个按钮添加一个点 ...
- RDLC 设置表的重复标题行（在每页中显示标题行）
在Tablix 属性对话框中勾选“在每一页上重复标题行”及“滚动时保持标题可见”结果没有用. 如果您使用的是一个“表”式布局,有一个简单的方法,可以尝试以下四个步骤: 1.在分组窗格中,单击窗格上的小 ...
- 用JavaScript，获取Table中指定的行、列
前言: 先要谢谢George Wing的慷慨赠书<悟透JavaScript>,让我更加感受到了技术交流的重要性,呵呵~ 进入正题,面试题中有一题:如何通过JavaScript获取Table ...
- jquery 在 table 中修改某行值
修改 table 中某行的的方法步骤如下: 1.选择要修改的行,事件触发,比如我的 双击某行时修改 2.将要修改的行,替换为input,原先的列中的值,需要放到对应的input中作为默认值 3.修改完 ...
- JSP table中除了第一行（标题）其他全清空
表格如下 <div style="overflow-x: auto;width: 800px"> <table id="taresults02" ...
- table 中的tr 行点击 变换颜色背景
<style> table{border-collapse: collapse;border-spacing: 0; width: 100%;} table tr th,td{border ...
- vue table中使用多选的问题（翻页后如何保存已选项），联动echarts图表实现流量监控
流量监控项目需求: 根据表格数据,添加多选功能,默认全选,根据已选项更新图表视图 1.表格需要多选 2.要联动图表,所以关键是要利用表格多选的触发回调函数 vue table中使用多选: 很简单,只需 ...
- 合并table中某一列相邻的相同的行
合并table中某一列相邻的相同的行1. [代码]合并table中某一列相邻的相同的行 <!DOCTYPE html><html> <head> ...
随机推荐
- （转）pdf文件结构
PDF文件结构(一) ————物理结构 PDF(Portable Document Format,便携式文档结构)是一种很有用的文件格式,其最大的特点是平台无关而且功能强大(支持文字/图象/ ...
- EF框架 转载
http://www.cnblogs.com/zrdm/p/5060360.html Model First Model First我们称之为"模型优先",这里的模型指的是&quo ...
- spring component-scan filter
(参考的Spring version : 4.1.6.RELEASE) 我们通常会使用component-scan来进行bean的加载,但是它里面的实现机制却是一知半解.根据原码来理解一下,可能会更加 ...
- Web Services 中XML、SOAP和WSDL的一些必要知识
Web Services 是由xml来定义数据格式的,通过SOAP协议在各个系统平台中传输,那么接下来讨论下SOAP和WSDL的各自作用. SOAP和WSDL对Web Service.WCF进行深入了 ...
- JavaScript笔记基础篇(一)
一. 常用正则表达式汇总以及部分问题解决方案 正则匹配: var str = "This is my test"; var test = new RegExp("test ...
- EXT学习之——Ext下拉框绑定无效的问题
1.保证store定义是否在combobox前面 2.有没写 .load 3.有没赋值 xxstore:xxstore 具体看详细步骤 http://www.cnblogs.com/wdw3121 ...
- input自动获取焦点
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>te ...
- python中subprocess.Popen.poll
import subprocess proc = subprocess.Popen(['python', 'test.py'], stdout=subprocess.PIPE) while 1: pr ...
- C#(Winform) Http 发送数据
Get方式 private string HttpGet(string url, string postData) { HttpWebRequest request = (HttpWebRequest ...
- Find Query Window的运作(手电筒)
Find Query Window的運作?(手电筒) 提示: 在點選 Toolbar的 Find鈕時,系統會觸發 Query_Find此 Trigger. 執行 App_Find.Query_Find ...