">
首页 ┆ 网站地图 ┆ 在线留言 ┆ 游戏资讯 ┆ 资源下载 ┆ 端午节祝福 ┆ 迅雷在线影视
设为首页
加入收藏
联系我们
高级搜索
您当前的位置: 主页>网站制作>网页特效>样式表固定table表头和列代码
样式表固定table表头和列代码
来源: 发布时间:2008-04-25 发布人: 浏览: 人次   字体: [ ]  
以下是通过样式表固定table表头和列代码例子:
<
html><head>
    
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    
<title>固定表头和列</title>
    
<style>

        .FixedTitleRow
        
{
            position
: relative; 
            top
: expression(this.offsetParent.scrollTop); 
            z-index
: 10;
            background-color
: #E6ECF0;
        
}
        
        .FixedTitleColumn
        
{
            position
: relative; 
            left
: expression(this.parentElement.offsetParent.scrollLeft);
        
}
        
        .FixedDataColumn
        
{
            position
: relative;
            left
: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
            background-color
: #E6ECF0;
        
}
    
</style>
</head><body>
<div id="scrollDiv" style="width: 300px; overflow: auto; cursor: default; display: inline;
    position: absolute; height: 200px;"
>
    
<table id='accountTable' width='500' height='230' cellpadding='0' cellspacing='0'
        
style='table-layout: auto' bordercolor='lightgrey'>
    
<tbody>
    
<tr class="FixedTitleRow">
        
<td class="FixedTitleColumn">ID0</td>
        
<td class="FixedTitleColumn">CK0</td>
        
<td class="FixedTitleColumn">Code0</td>
        
<td class="FixedTitleColumn">Descirption0</td>
        
<td class="FixedTitleColumn">TOL0</td>
        
<td>XS0</td>
        
<td>SS0</td>
        
<td>MS0</td>
        
<td>DS0</td>
        
<td>BS0</td>
        
<td>XL0</td>
        
<td>ML0</td>
        
<td>DL0</td>
        
<td>EM0</td>
        
<td>BM0</td>
    
</tr><tr>
        
<td class="FixedDataColumn">88</td>
        
<td class="FixedDataColumn">88</td>
        
<td class="FixedDataColumn">88</td>
        
<td class="FixedDataColumn">88</td>
        
<td class="FixedDataColumn">88</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
    
</tr><tr>
        
<td class="FixedDataColumn">111</td>
        
<td class="FixedDataColumn">111</td>
        
<td class="FixedDataColumn">1111</td>
        
<td class="FixedDataColumn">This is Test</td>
        
<td class="FixedDataColumn">1</td>
        
<td>001</td>
        
<td>002</td>
        
<td>003</td>
        
<td>004</td>
        
<td>005</td>
        
<td>006</td>
        
<td>007</td>
        
<td>008</td>
        
<td>009</td>
        
<td>010</td>
    
</tr><tr>
        
<td class="FixedDataColumn">111</td>
        
<td class="FixedDataColumn">111</td>
        
<td class="FixedDataColumn">1111</td>
        
<td class="FixedDataColumn">This is Test</td>
        
<td class="FixedDataColumn">1</td>
        
<td>001</td>
        
<td>002</td>
        
<td>003</td>
        
<td>004</td>
        
<td>005</td>
        
<td>006</td>
        
<td>007</td>
        
<td>008</td>
        
<td>009</td>
        
<td>010</td>
    
</tr><tr>
        
<td class="FixedDataColumn">111</td>
        
<td class="FixedDataColumn">111</td>
        
<td class="FixedDataColumn">1111</td>
        
<td class="FixedDataColumn">This is Test</td>
        
<td class="FixedDataColumn">1</td>
        
<td>001</td>
        
<td>002</td>
        
<td>003</td>
        
<td>004</td>
        
<td>005</td>
        
<td>006</td>
        
<td>007</td>
        
<td>008</td>
        
<td>009</td>
        
<td>010</td>
    
</tr>
    
</tbody>
    
</table>
</div>
</body></html>

相 关 文 章   发布商链接
·CSS模拟windows菜单选项卡效果
·解决长串英文字母将表格伸的很长,不...
·CSS实现多种多彩文字链接代码效果
·CSS样式实现文字分散对齐的方法
·利用CSS样式控制打印页面显示效果
·当左右内容高度不定时,中间分割线的...
·按页自动滚动图片或文字的特效代码
·网页开发特效之input控件高度固定,...
·网页开发特效之textarea控件宽度固定...
·图解CSS解决图片下面有空隙的问题
 §最新评论:(评论内容只代表网友观点,与本站立场无关!)
网名: 验证码:  【所有评论】【↑返回顶部
评 分: 12 345
评论内容:(不能超过500字,请自觉遵守互联网相关政策法规。[按 Ctrl+Enter 可直接提交]
注意:请勿在本站发布政治话题、色情及违反法律的内容。
IT知道网 声明:刊登此文章是为了传递更多信息,文章内容仅供参考,转载请注明出处。
推 荐 文 章
·鼠标移到链接出现漂亮的对话...
·当左右内容高度不定时,中间...
·利用CSS样式控制打印页面显示
·CSS样式实现文字分散对齐的方
·CSS实现多种多彩文字链接代码
·解决长串英文字母将表格伸的...
·CSS模拟windows菜单选项卡效...
·DIV+CSS两个简单的导航效果,...
·Css样式表实现文字的渐变效果
·动态添加表单两法
·无刷新更换页面样式例子供大...
·网页CSS样式表学习技巧小记,
·淘宝在线状态和qq在线状态的...
·仿windows关机对话框的提示框
·网页表格制作之圆圈型表格的...
热 门 文 章
·淘宝在线状态和qq在线状态的...
·图片左右滚动代码,鼠标放上去...
·css固定定位实现悬浮效果
·js实现的文字无缝向上滚动的...
·js实现复制内容到剪贴板,可...
·CSS模拟windows菜单选项卡效...
·CSS样式实现文字分散对齐的方...
·教您实现Div的动态伸缩效果 ...
·通过CSS来动态改变界面样式实...
·实例解决Div被Select挡住问题...
·实例讲解利用css滤镜实现背景...
·DIV+CSS两个简单的导航效果,...
·仿windows关机对话框的提示框...
·网页开发特效之input控件高度...
·一段无图片纯CSS实现圆角的代...
网站首页 - 关于本站 - 加入收藏 - 网站地图 - 友情连接 - 在线留言 - 联系我们 - 返回顶部
Copyright © 2007 IT知道网.[冀ICP备07026896号]. All Rights Reserved .