这里只是简单的实现，主要是用了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. go1.6.2 linux/amd64 的一个bug： gcc: 无法识别的选项‘-no-pie’

    如果你的linux是中文版的. 即:执行 # echo $LANG 命令,返回的是 zh_CN.UTF-8 则会出现这个bug, 如果是 en_US.UTF-8 则没有这个问题.   这个bug的一个 ...

  2. zmap使用笔记

    zmap使用笔记 zmap, 一个网络端口开放性的快速扫描工具.至于这个工具的特色,配置参数,和比的工具的对比,不做介绍.只记录一下近期使用过程中,遇到的问题.软件版本:2.1.1 传言与现实 传言: ...

  3. 洛谷P3368 【模板】树状数组 2

    P3368 [模板]树状数组 2 102通过 206提交 题目提供者HansBug 标签 难度普及/提高- 提交  讨论  题解 最新讨论 暂时没有讨论 题目描述 如题,已知一个数列,你需要进行下面两 ...

  4. 用EXcel制作不同背景的图

    Excel 绘图区分区设置不同背景色 之 条形图 样图 在Excel图表中,如对绘图区设置背景色,一般只能对整个绘图区设置同一种颜色.图案或图片为背景.但有时希望能对不同的分区设置不同的颜色作为背景, ...

  5. vs2013_arcgis_developer_kit_101_install

    1.修改注册表以安装AE101 在注册表中HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\VisualStudio\10.0增加类型为REG_SZ的 ...

  6. WinServer2008R2 部署.NET4.0程序 注意事项

    部署注意事项:   1.IIS应用程序池 集成模式   2.在web.config中的system.webServer下,添加 <modules runAllManagedModulesForA ...

  7. Centos 6 之samba 搭建

    学习linux从实践做起. 实验环境:vmware,cenots 6,xshell 注意:使用vmware 时,网络连接设置成桥接,和宿主机位于同一个网段. 实验需求:模拟实际公司文件服务器. 新建S ...

  8. 【转】java的socket编程

    转自:http://www.cnblogs.com/linzheng/archive/2011/01/23/1942328.html 一,网络编程中两个主要的问题 一个是如何准确的定位网络上一台或多台 ...

  9. html弹出窗并用遮罩层的实例

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  10. IE 下JS和CSS 阻塞后面内容总结

    总结: 1.  CSS 都是可以并行下载的. 2.  IE6 和 IE7   JS 不能并行下载,CSS 和 JS 阻塞后面内容下载. 3.  IE8   JS 还是会阻塞图片下载 开始改变加载模式, ...