<!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 ...