<!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. 2018-2019-2 《网络对抗技术》Exp3免杀原理与实践 20165222

    1. 实践内容  1.1 正确使用msf编码器 使用 msfvenom -p windows/meterpreter/reverse_tcp -e x86/shikata_ga_nai -i 7 -b ...

  2. mysql master master slave 环境搭建

    master1:192.168.128.47 master2:192.168.128.96 slave:192.168.128.97   master1与master2互备,master2作为slav ...

  3. Spring Boot 报错：Error creating bean with name 'entityManagerFactory' defined in class path resource

    spring boot 写一个web项目,在使用spring-data-jpa的时候,启动报如下错误: Error starting ApplicationContext. To display th ...

  4. CCFlow工作流程起航

    详细可参考SDK请假流程.但请假流程中定义的四个表单只是四个节点表单,首先要依靠访问指向这个请假流程,两种方法进入: 一.是在流程设计中点击运行: 二.先访问 WF\App\Simple\login. ...

  5. GNU Radio: Multiple USRP configurations 配置多个USRP设备

    Introduction 引言 Some USRP devices are capable of being grouped to form a single, virtual device. A s ...

  6. 关于Fragment框架，说的够清晰了。。。

    Android4.0-Fragment框架实现方式剖析(一) 分类: Android UI 2012-09-19 18:59 14880人阅读 评论(8) 收藏 举报 android   目录(?)[ ...

  7. C++和C# WebService相互调用

    C#调用C++ gSOAP: 调用http://blog.csdn.net/ggz631047367/article/details/44567411的服务http://127.0.0.1:8089/ ...

  8. Sql2008 全文索引 简明教程

    在SQL Server 中提供了一种名为全文索引的技术,可以大大提高从长字符串里搜索数 据的速度,不用在用LIKE这样低效率的模糊查询了.   下面简明的介绍如何使用Sql2008 全文索引 一.检查 ...

  9. storm架构及原理

    storm 架构与原理 1 storm简介 1.1 storm是什么 如果只用一句话来描述 storm 是什么的话:分布式 && 实时 计算系统.按照作者 Nathan Marz 的说 ...

  10. django2.0表的ORM字段类型和展示

    django2.0表的ORM字段类型和展示 思路整理 今天想给博客的文章添加增加一个分类字段 但是不知道这种后台字段生成的字段,样式怎么处理 后来找到了,就是在定义模型的字段定义的时候 决定样式 mo ...