<!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. kafka搭建

    接下来一步一步搭建Kafka运行环境. Step 1: 下载Kafka 点击下载最新的版本并解压. > tar -xzf kafka_2.9.2-0.8.1.1.tgz > cd kafk ...

  2. 浅谈 Gevent 与 Tornado（转）

    原文:http://www.pywave.com/2012/08/17/about-gevent-and-tornado/ 还是前几月的时候,几乎在同一时间,自己接触到了 Gevent 和 Torna ...

  3. ajax请求返回Json字符串运用highcharts数据图表展现数据

    [1].[图片] Json字符串和highcharts数据图表展现.jpg 跳至 [1] code=26754#44745" rel="nofollow"> [2] ...

  4. IMP-00009: 导出文件异常结束 imp

    在一次exp/imp中,用imp导入数据时报错.错误信息如下: IMP-00009: 导出文件异常结束 imp导入时异常结束可以有很多原因造成,要具体问题具体分析. 可能原因一: 导入的数据表过大,而 ...

  5. 实用的IP地址处理模块IPy

    https://www.cnblogs.com/cherishry/p/5916935.html IPy安装 pip install IPy IP地址.网段的基本处理 IPy模块包含IP类,使用它可以 ...

  6. ORA-09817: Write to audit file failed 的解决

    今天在进行awr报表导出时,用sys as sysdba 登录,不能connect,报ORA-09817: Write to audit file failed 错误,是系统空间不足的报警.df -l ...

  7. Windows自带NAT端口映射，命令行CMD操作即可

    由于有需求进行端口映射,又不想装乱七八糟的软件,Windows本身自带的路由远程访问配置太麻烦,还要两块网卡,坑爹啊. 其实Windows本身命令行支持配置端口映射,条件是已经安装了IPV6,启不启用 ...

  8. 【monkey】mokey常用事件<二>

    格式:adb shell monkey 事件参数 百分数 事件数,如: adb shell monkey --pct-majornav 100 -v 10 --pct-touch <percen ...

  9. class文件格式说明

    java代码编译成class文件之后,class文件里面的语法是什么样的,他的数据类型是什么以及如何存放的?? class也是一种语言写的,只不过和我们的java语法不同而已. class文件就是把j ...

  10. MySQL 存储配置