<!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. NYOJ-1036 非洲小孩

    非洲小孩 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描写叙述 家住非洲的小孩,都非常黑.为什么呢? 第一,他们地处热带,太阳辐射严重. 第二,他们不常常洗澡.(常年缺水, ...

  2. MySQL的WHERE语句中BETWEEN与IN的用法和他们的区别

    MySQL BETWEEN 用法 not可以对between...and取反. 1.数值型 BETWEEN 运算符用于 WHERE 表达式中,选取介于两个值之间的数据范围.BETWEEN 同 AND ...

  3. centos6.5下tomcat安装

    1.安装JDK 安装:rpm –ivh jdk-7u5-linux-i586.rpm2.配置Tomcat 解压:tar -zxvf apache-tomcat-8.0.11.tar.gz 移动到/us ...

  4. Java多线程编程核心技术，第六章

    1,饿汉模式/单例模式,一开始就新建一个静态变量,后面用getInstance()都是同一个变量 2,懒汉模式/单例模式,在getInstance()才会new一个对象,在第一个有了后不会继续创建 3 ...

  5. 3.Appium运行时出现：Original error: Android devices must be of API level 17 or higher. Please change your device to Selendroid or upgrade Android on your device

    参考博客:https://blog.csdn.net/niubitianping/article/details/52624417 1.错误信息:Original error: Android dev ...

  6. spring boot打包部署到Linux环境

    打包部署说白了就两步:打包.部署.废话不多说,直接拿spring boot自动生成的项目骨架,再添加一个文件用来演示: package com.crocodile.springboot; import ...

  7. ETL流程概述及常用实现方法

    ETL流程概述及常用实现方法 http://blog.csdn.net/btkuangxp/article/details/48224187 目录(?)[-] 1抽取作业 1手工开发抽取作业时候的常用 ...

  8. C语言:宽字符集操作函数（unicode编码）

    C语言:宽字符集操作函数(unicode编码) 字符分类: 宽字符函数 普通C函数描述 iswalnum() isalnum() 测试字符是否为数字或字母 iswalpha() isalpha() 测 ...

  9. ANSI和UNICODE编程的注意事项

    建立UNICODE编码工程 在VC60下,默认方式下建立的是ANSI编码的工程(注:编译的exe内部,其资源字符是以UNICODE保存),建立UNICODE编码工程的方法: 1.为工程添加UNICOD ...

  10. 黄聪：360浏览器、chrome开发扩展插件教程（2）为html添加行为

    转载:http://www.cnblogs.com/walkingp/archive/2011/04/02/2002668.html 上一节我们已经讲了Chrome扩展的基础知识,并构建了基础的htm ...