滚动条超出表格标题,表格标题固定

css:样式

#divTitle{padding:10px;position:relative;top:0px;width:93.5%; z-index:100; background-color:#6FA1D8;}

<div id="divTitle" style=" display:none;">
<table style="width: 100%; border-collapse: collapse;">
<tr style="background-color: #6fa1d8; height: 24px;">
<td style="width:130px;">功能分类名称</td>
<td style="width:160px;">项目名称</td>
<td style="width:130px;">初始金额</td>
<td style="width:130px;">待审核金额</td>
<td style="width:90px;">可用金额</td>
<td style="width:90px;">实际发生金额</td>
<td style="width:90px;">使用百分比列</td>
</tr>
</table>
</div>

js 脚本

function menuFixed(id) {
var obj = document.getElementById(id);
var _getHeight = obj.offsetTop;
window.onscroll = function() {
changePos(id, _getHeight);
}
}
function changePos(id, height) {
var obj = document.getElementById(id);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var height = $("#table_Collgrid").offset().top;
if (scrollTop+20 < height) {
obj.style.position = ‘relative‘;
obj.style.display = "none";
} else {
obj.style.position = ‘fixed‘;
obj.style.display = "";
}
}
window.onload = function() {
menuFixed(‘divTitle‘);
}

时间: 2024-07-29 23:07:37

滚动条超出表格标题,表格标题固定的相关文章

表格头部和侧边栏固定

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

MVC打印表格,把表格内容放到部分视图打印

假设在一个页面上有众多内容,而我们只想把该页面上的表格内容打印出来,window.print()方法会把整个页面的内容打印出来,如何做到只打印表格内容呢? 既然window.print()只会打印整页的内容,何不把表格放在一个部分视图中,在部分视图中再调用window.print()方法. Model很简单: public class Student { public int Id { get; set; } public string Name { get; set; } public dec

(java)selenium webdriver学习---实现简单的翻页,将页面内容的标题和标题链接取出

selenium webdriver学习---实现简单的翻页,将页面内容的标题和标题链接取出: 该情况适合能能循环page=1~n,并且每个网页随着循环可以打开的情况, 注意一定是自己拼接的url可以打开,如:http://ask.testfan.cn/articles?page=15,就可以翻到文章分类的第15页: import java.io.File; import java.io.IOException; import java.util.ArrayList; import java.u

GridControl GridView 修改表格中的标题居中

Grid Designer>Views>Appearance>HeaderPanel>TextOptions>HAIignment{Center} 依次打开并找到HAILignment修改最后面的参数. 居中效果

asp.net table表格表头及列固定实现

在开发中常会遇到table表格中列特别多,下拉后,表头就看不见了,水平滚动后,第1.2列就看不见了,于是需求就出来了,就是需要固定table的表头和列. demo结构如下图所示: demo下载地址:http://download.csdn.net/detail/taomanman/9124949 示例运行效果如下图所示: 版权声明:本文为博主原创文章,未经博主允许不得转载.

【2017-03-20】HTML基础知识,标记,表格,表格嵌套及布局,超链接

一.HTML  网站(站点),网页基础知识 HTML是一门编程语言的名字:超文本标记语言 可以理解为:超越了文本的范畴,可以有图片.视频.音频.动画特效等其他内容,用标记的方法进行编程的计算机语言 基本格式: <html> <title>标题名称</title> <head> 网页渲染,特效 </head> <body> 网页内容 </body> </html> 二.标记 添加注释:<!--注释内容--&

Bootstrap-table表格初始化表格数据

一.项目说明 ①此项目是ASP.NET项目,开发语言是C# ②bootstrap-table使用需要下载对应的css和js插件 ③具体详情还需查看api文档 二.前端代码 1 <div class="table-responsive"> 2 <table id="table" class="text-nowrap"> </table> 3 </div> [说明] ①text-nowrap设置表格超出

二、制作BOM表格--物料表格--Bill of Materials

公司会根据这个表格进行相关元器件的采购--以及后期的贴片上彩 操作: .dsn--Tools--Bill of Materials 出现如下对话框--默认设置--勾选--使用Excel打开 顺序--数量--位号--值 对应--四项条目--大括号里面--系统里面相关的一些关键字--系统根据这些关键字--调用一些值--显示在Excel表格里 可根据需要--进行更改--如:显示封装 若出现如下错误--说明Excel窗口没有关闭--关闭后可正常生成

ExtJs之gridPanel的属性表格,编辑表格,表格分页,分组等技巧

这里藏的配置确实多.. 慢慢实践吧. <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css"