表格头部和侧边栏固定

<!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-Type" content="text/html; charset=utf-8" />
<title>表格头部和侧边栏固定</title>
<style>
body,ul,li,div,table,tbody,td,tr{ padding:0; margin:0;}
body{font-size:12px;}
li{ list-style:none;}
.iTable_div{width:100%;overflow:hidden; position:relative;z-index:99999;}
.iLeft_tit{ text-align:center; width:130px;border-left:1px solid #ccc;border-right:1px solid #ccc; position:absolute; left:0; top:0; background:#ecf4fd; box-sizing:border-box;overflow:hidden; padding-top:18px;}
.iLeft_tit li{height:18px; border-bottom:1px solid #ccc; box-sizing:border-box;}
.iTop_tit{position:absolute; height:18px; top:0; left:129px;z-index:10; background:#c4def7;width:86.8%; overflow:hidden;}
.iTop_tit ul{width:2000%;overflow:hidden; box-sizing:border-box;border-left:none; text-align:center; border:1px solid #ccc; height:18px;border-left:none;}
.iTop_tit li{float:left; width:130px; border-left:1px solid #ccc; box-sizing:border-box; height:18px; }
.itable_content{width:88%;padding-left:129px; padding-top:18px;overflow:auto;}
.itable{border-spacing:0;table-layout:fixed;}
.itable td{ width:130px; height:18px;box-sizing:border-box; text-align:center;border-left:1px solid #ccc; border-bottom:1px solid #ccc;}
#iFixed_li{position:absolute; left:0; top:0; background:#c4def7;z-index:200; width:130px; height:18px;border-top:1px solid #ccc; }
</style>
</head>
<body>
<div class="iTable_div">
<div class="iLeft_tit">
<ul>
<li id="iFixed_li"></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>
</div>
<div class="iTop_tit">
<ul class="iTop_ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<div class="itable_content" id="itable_content">
<table class="itable" id="itable">
</table>
</div>
</div>
<script language="JavaScript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script>
var div_height=300;
var table_html=‘‘;
for(var i=0;i<20;i++)
{
table_html+=‘<tr><td class="tr_first_td">我是中国</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>‘
}
function iF_Scroll(div_height){
$(‘#itable‘).html(table_html).width(15*130);
$(".iTable_div").height(div_height);
$(".itable_content").height(div_height-17);
$(".iLeft_tit").height(div_height-17);
var iLeft_tit_height=div_height-17;
var iTop_tit_left=$(".iTop_tit").offset().left;
var iTop_tit_width=$(".iTop_tit").width();
$(".itable_content").scroll(function(){
var div_scrollLeft=$(this).scrollLeft();
var div_scrollTop=$(this).scrollTop();
$(".iLeft_tit").css({"top":-div_scrollTop+"px","height":iLeft_tit_height+div_scrollTop+"px"});
$(".iTop_tit").css({"left":iTop_tit_left-div_scrollLeft,"width":iTop_tit_width+div_scrollLeft+"px"})
$("#iFixed_li").css("top",div_scrollTop)
})
}
iF_Scroll(div_height);
</script>
</body>
</html>

时间： 2024-11-05 14:37:03

表格头部和侧边栏固定的相关文章

侧边栏固定的布局

这部分没有弄得很清楚 问题来源: http://codepen.io/wmrch05/details/LiaKG 在上述案例中,页面滚动的时候,侧边栏和顶部导航的布局由static转换为fixed.同时相对于原来的static的位置发生了编码,案例的源码是:(最终的scripts源码感觉涉及到一些高级的编程特性,没怎么看懂) <html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage w

表格头部header固定

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus?"> <meta name="Author" content=""> <meta name="

table头部、尾部固定;中间内容定高自适应滚动

很多时候,需要使用到表格做数据分析,不管是前端展现,还是后台管理系统节点展现 工作过程中遇到了,作为一个小笔记,备忘! 如下图所示 --------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------

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

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

关于侧边栏固定广告

关于各类浮动的侧边栏小广告的实现. 纯css的方式实现:主要在于position属性中的fixed,固定侧边,在设置方位后,就能始终处于页面左侧或者右侧.这是最简便的实现方式.但是又一个兼容性的问题,就是在ie6下是无法设置的.所以需要一些额外 .fixed{ position:fixed; clip:rect(0 100% 100% 0); _position:absolute; /* 底部 */ bottom:0px; left:0px; _top:expression(document.d

jQuery侧边栏固定

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #top_head { width: 100%; height: 253px; background: gray; } #middle_right_list { width: 70%; height: 1800px; background: #0000

单侧边栏固定宽 主内容自适应

效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{padding:0;margin:0;} *{box-sizing:border-box;} .side{width:200px;height:500px;background

两侧边栏固定宽 主内容自适应

效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{padding:0;margin:0;} *{box-sizing:border-box;} .side-left{width:200px;min-height:500px;b

布局问题： （ 头部，底部固定，并且头部吸顶，底部吸底，中间自适应（内容多可以scroll））

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatib