<!DOCTYPE html>

<html lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

    body {

        border: none;

        margin: 0px;

        padding: 0px;

        text-align: center;

    }

    table {

        flex-align: center;

        text-align: center;

        border: 0px;

        border-spacing: 0px;

        border-collapse: collapse;

        width: 80%;

        margin: 0 auto;

        position: relative;

    }

    table thead tr {

        border: 0px;

        background: #F3FBFE;

        position: fixed;

        width: 80%;

        z-index: 1;

    }

    table thead tr::after {

    }

    table tbody {

        position: absolute;

        top: 50px;

    }

    table tbody tr {

        border: 0px;

        background: #FFF;

    }

    table tr td,

    table tr th {

        height: 50px;

        padding: 0px;

        border-spacing: 0px;

        margin: 0px;

        border: 1px solid red;

        width: 1%;

    }

    </style>

    <script src="js/jquery-1.11.1.min.js"></script>

    <script type="text/javascript">

    $(function() {

        // $('#tablem tr').css('background', '#F3FBFE');

        $('#tablem tr:not(:first)').mouseover(function() {

            $(this).css('background', '#C1E6FF').siblings().css('background', '#FFF');

        });

    });

    </script>

    <body>

        <table id="tablem">

            <thead>

                <tr>

                    <th>

                        第一列

                    </th>

                    <th>

                        第二列

                    </th>

                    <th>

                        第三列

                    </th>

                    <th>

                        第四列

                    </th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>11</td>

                    <td>12</td>

                    <td>13</td>

                    <td>14</td>

                </tr>

                <tr>

                    <td>21</td>

                    <td>22</td>

                    <td>23</td>

                    <td>24</td>

                </tr>

                <tr>

                    <td>31</td>

                    <td>32</td>

                    <td>33</td>

                    <td>34</td>

                </tr>

                <tr>

                    <td>41</td>

                    <td>42</td>

                    <td>43</td>

                    <td>44</td>

                </tr>

                <tr>

                    <td>51</td>

                    <td>52</td>

                    <td>53</td>

                    <td>54</td>

                </tr>

                <tr>

                    <td>61</td>

                    <td>62</td>

                    <td>63</td>

                    <td>64</td>

                </tr>

                <tr>

                    <td>71</td>

                    <td>72</td>

                    <td>73</td>

                    <td>74</td>

                </tr>

                <tr>

                    <td>81</td>

                    <td>82</td>

                    <td>83</td>

                    <td>44</td>

                </tr>

                <tr>

                    <td>91</td>

                    <td>92</td>

                    <td>93</td>

                    <td>94</td>

                </tr>

                <tr>

                    <td>100</td>

                    <td>100</td>

                    <td>100</td>

                    <td>100</td>

                </tr>

                <tr>

                    <td>100</td>

                    <td>100</td>

                    <td>100</td>

                    <td>100</td>

                </tr>

                <tr>

                    <td>100</td>

                    <td>100</td>

                    <td>100</td>

                    <td>100</td>

                </tr>

                <tr>

                    <td>100</td>

                    <td>100</td>

                    <td>100</td>

                    <td>100</td>

                </tr>

                <tr>

                    <td>100</td>

                    <td>100</td>

                    <td>100</td>

                    <td>100</td>

                </tr>

                <tr>

                    <td>100</td>

                    <td>100</td>

                    <td>100</td>

                    <td>100</td>

                </tr>

                <tr>

                    <td>100</td>

                    <td>100</td>

                    <td>100</td>

                    <td>100</td>

                </tr>

                <tr>

                    <td>100</td>

                    <td>100</td>

                    <td>100</td>

                    <td>100</td>

                </tr>

            </tbody>

        </table>

    </body>

</html>

　　

模拟在table中移动鼠标，高亮显示鼠标所在行，固定表头的更多相关文章

  1. 模拟在table中移动鼠标，高亮显示鼠标所在行

    在项目中有这样一个需求,在table中移动鼠标时,鼠标所在行高亮显示,其他行正常显示,为此做了一个模拟. 具体代码如下: <!DOCTYPE html> <html xmlns=&q ...

  2. css实现table中td单元格鼠标悬浮时显示更多内容

    table中,td单元格无法显示下全部内容,需要在鼠标hover时显示全部内容. 正常显示样式: 鼠标hover时: html: <td>displayAddress<span cl ...

  3. 使用VUE实现在table中文字信息超过5个隐藏，鼠标移到时弹窗显示全部

    使用VUE实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部 <template> <div> <table> <tr v-for="i ...

  4. 使用html及CSS实现在table中文字信息超过5个隐藏，鼠标移到时弹窗显示全部：

    使用html及CSS实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部: <!DOCTYPE html><html lang="en">< ...

  5. 在Mockplus中，如何做鼠标悬停时菜单下拉的效果？

    了解Mockplus的用户会知道,该原型工具目前并不直接支持鼠标悬停功能.但我经过尝试,发现想用它实现一个鼠标悬停事件并不是什么难事,比如网页设计中很常见的鼠标悬停时菜单下拉的效果,只要换个思路,利用 ...

  6. WPF 窗体中获取键盘和鼠标无操作时的超时提示

    原文:WPF 窗体中获取键盘和鼠标无操作时的超时提示 通过调用Windows API中的GetLastInputInfo来获取最后一次输入的时间 , , );            timer.Tic ...

  7. jquery 在 table 中修改某行值

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

  8. table中td的宽度不随文字变宽

    1.设置了table的宽度后,宽度仍然不固定,td的内容一多,很容易吧table撑变形.有些时候我们需要设置固定的宽度. 解决办法 table的css 加入样式  table-layout:fixed ...

  9. [easyui] - 在easyui的table中展示提示框

    因为在easyui的table中字段过多,而无法展示全时,被迫只能使用这个方法. 使用方式: 在 $('#dg').datagrid({ 后的 queryParams: form2Json('sear ...

随机推荐

  1. 堆排序（C语言实现）

    一.堆的概念 所谓堆,它是一个数组,也能够被看成一个近似的全然二叉树.树上每一个结点相应数组的一个元素.二叉堆分为二种:最大堆和最小堆.本文主要介绍最大堆,最小堆类似.最大堆的特点:对于随意某个结点, ...

  2. Git 学习记录一

    主要来源参考http://www.runoob.com/git/git-install-setup.html Windows 平台上安装 在 Windows 平台上安装 Git 同样轻松,有个叫做 m ...

  3. BUG的定位与分析思路

    一般来说bug大多数存在于3个模块: 1.前台界面,包括界面的显示,兼容性,数据提交的判断,页面的跳转等等,这些bug基本都是一眼可见的,不太需要定位,当然也不排除一些特殊情况,本身数据传过来的时候就 ...

  4. linux之 multipath 多路径

    一.什么是多路径 普通的电脑主机都是一个硬盘挂接到一个总线上,这里是一对一的关系.而到了有光纤组成的SAN环境,或者由iSCSI组成的IPSAN环境,由于主机和存储通过了光纤交换机或者多块网卡及IP来 ...

  5. [C++ Primer] 第3章: 字符串, 向量和数组

    标准库类型string string初始化 string s2(s1); string s2 = s1; string s3("value"); string s3 = " ...

  6. Oracle.DataAccess.dll 部署安装

    Oracle.DataAccess.dll 要拷贝到项目发布目录 项目发布的时候,还必须要拷贝以下几个文件在运行目录1.oci.dll 2.oraociicus11.dll 3.OraOps11w.d ...

  7. 深入浅出HTTPS工作原理(转载)

    转载自: https://blog.csdn.net/wangtaomtk/article/details/80917081 深入浅出HTTPS工作原理 HTTP协议由于是明文传送,所以存在三大风险: ...

  8. 【BZOJ】1801 [Ahoi2009]chess 中国象棋（dp）

    题目 传送门:QWQ 分析 发现我们关心的不是棋子的位置,我们只关心棋子数量就ok. 首先每行每列最多两个棋子.这是显然的. 然后我觉得本题最难的部分就是对行进行讨论,蒟蒻我一直被限制在了对格点讨论. ...

  9. 【BZOJ】1057 [ZJOI2007]棋盘制作（悬线法）

    题目 传送门:QWQ 分析 先把题目给出的矩阵变换一下,如果$ a[i][j] $中$ i+j \mod 2 = 1 $那么就对$ a[i][j] $取一下反. 接着就是求原图中最大的0.1子矩阵 详 ...

  10. python一些不错的东西

    1 cmd命令行写代码的加强版  ipython  直接用pip安装就可以   php install Ipython 2 不错的数据分析 机器语言的 Python(x,y)是一个基于python的科 ...