<!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. JFrog Artifactory CE c&&c++ 包管理工具

    JFrog Artifactory CE 支持conan 以及普通二进制c&&c++包管理 使用docker 进行环境的搭建测试 安装 docker run -d -p 8081:80 ...

  2. MySql 中的 FIND_IN_SET 的使用和相关问题

    MySql 中的 FIND_IN_SET 的使用和相关问题 QQ 群里有人讨论如果在 category_ids 中打开 12 的分类,而 category_ids 中的 ID 是以 逗号分开的. 使用 ...

  3. 自动下载google reader里面的星标文章

    1. google reader马上就要关闭了,最后一次看看俺的浏览记录吧 最近 30 天的统计信息 全部订阅: 367 已读条目: 151 已点击的条目:41 个 加星标条目: 16 已发电子邮件条 ...

  4. oracle 归档日志总结

    Oracle 归档模式和非归档模式 归档模式和非归档模式 在DBA部署数据库之初,必须要做出的最重要决定之一就是选择归档模式(ARCHIVELOG)或者非 归档模式(NOARCHIVELOG )下运行 ...

  5. HDU 3746 Cyclic Nacklace (用kmp求循环节）

    Cyclic Nacklace Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  6. python编程遇见的异常

    import sys print('目前系统的编码为:',sys.getdefaultencoding()) # 目前系统的编码为: utf-8 name = 'this is a test!' pr ...

  7. android.support.v7.internal.widget.ActionBarOverlayLayout Couldn't Be Initialized

    问题症状: Android Studio 1.2 (Build 141.1890965) 新建工程,自动build完成后,Layout Editor无法预览Layout文件,报错内容: Renderi ...

  8. Mysql总结（一）

    数据库命令:创建create database 数据库名 charset=utf8;删除drop database 数据库名;查看所有数据库:show databases;使用数据库:use 数据库名 ...

  9. uwsgi的使用

    uwsgi是一个WEB服务器,只要用于python部分,类似于nginx ,apache 1 使用pip命令安装 pip install uwsgi 安装成功以后 可以做一个简单的测试 2 新建一个t ...

  10. Python/Java读取TXT文件

    JAVA: public static void readTextFile(String filePath) { try { String encoding = "GBK"; Fi ...