这里只是简单的实现,主要是用了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中的标题行冻结的简单实现的更多相关文章

  1. Table标题行冻结,数据行滚动的一种方式

    这段时间在做Table标题行冻结,数据行滚动,虽然能实现,但也遇到一些问题,记录下来. 首先说说实现,实现其实不难,估计很多人都能想象出来,那就是标题行与内容行分离.我是这么做的,用两个表格,一个只有 ...

  2. Vue. 之 Element获取table中选中的行

    Vue. 之 Element获取table中选中的行 问题描述: 如下截图,在Table中选择数据后,然后在点击“统计”按钮,获取Table表中选择的行 解决方案: 1. 给“统计”这个按钮添加一个点 ...

  3. RDLC 设置表的重复标题行(在每页中显示标题行)

    在Tablix 属性对话框中勾选“在每一页上重复标题行”及“滚动时保持标题可见”结果没有用. 如果您使用的是一个“表”式布局,有一个简单的方法,可以尝试以下四个步骤: 1.在分组窗格中,单击窗格上的小 ...

  4. 用JavaScript,获取Table中指定的行、列

    前言: 先要谢谢George Wing的慷慨赠书<悟透JavaScript>,让我更加感受到了技术交流的重要性,呵呵~ 进入正题,面试题中有一题:如何通过JavaScript获取Table ...

  5. jquery 在 table 中修改某行值

    修改 table 中某行的的方法步骤如下: 1.选择要修改的行,事件触发,比如我的 双击某行时修改 2.将要修改的行,替换为input,原先的列中的值,需要放到对应的input中作为默认值 3.修改完 ...

  6. JSP table中除了第一行(标题)其他全清空

    表格如下 <div style="overflow-x: auto;width: 800px"> <table id="taresults02" ...

  7. table 中的tr 行点击 变换颜色背景

    <style> table{border-collapse: collapse;border-spacing: 0; width: 100%;} table tr th,td{border ...

  8. vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

    流量监控项目需求: 根据表格数据,添加多选功能,默认全选,根据已选项更新图表视图 1.表格需要多选 2.要联动图表,所以关键是要利用表格多选的触发回调函数 vue table中使用多选: 很简单,只需 ...

  9. 合并table中某一列相邻的相同的行

    合并table中某一列相邻的相同的行​1. [代码]合并table中某一列相邻的相同的行  <!DOCTYPE html><html>    <head>      ...

随机推荐

  1. java堆内存和栈内存的处理

    前段时间学习二叉树在处理删除操作的时候遇到一个头疼的问题:删除节点的时候明明已经置null了可树上该节点依旧存在,还必须执行node.father.left = null;才可以删除node节点,寻找 ...

  2. unity3d c#调用控件属性

    GUIText控件wenzi text 属性值 GameObject.Find("wenzi").guiText.text="修改内容"; 把你要获取的变量权限 ...

  3. rpm包形式安装MySQL

    1.下载Mysql安装所需的rpm包 http://cdn.mysql.com/Downloads/MySQL-5.6/MySQL-server-5.6.21-1.linux_glibc2.5.x86 ...

  4. Aquarium Cycling

    http://www.fishyou.com/aquarium-cycling.php Aquarium Cycling Aquarium cycling actually refers to the ...

  5. 创建线程方式-NSOperation

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  6. ThinkPHP的路由形式

    首先解释一下,这里路由的意思是:系统从URL参数中分析出当前请求的分组.控制器.操作 .另外我的网址根目录是放在article目录下的,Thinkphp主要有下面几种路由形式 1.pathinfo路径 ...

  7. C++ 如何有效地使用对话框

    Q:如何在对话框中加入工具条 在 OnInitDialog 中加入下面代码: BOOL CYourDlg::OnInitDialog() { CDialog::OnInitDialog(); // C ...

  8. Python学习——基础篇

    1.python的安装     python下载地址:https://www.python.org/downloads/     安装完成后,运行cmd.exe,输入python     如果出现“p ...

  9. IDE神器intellij idea的基本使用

    摘自: http://www.cnblogs.com/newpanderking/p/4887981.html 一.编码快捷键(比较常用的快捷键)该套快捷键选择的是:Mac OS X 10.5+ 1. ...

  10. knockoutJS+knockout.multimodels使用记录

    可以多次绑定,但不能嵌套绑定 错误示例: <div class="con_c" data-model="viewModel"> <div da ...