最近项目中发现talbe的列或者行太多展示不方便,需要冻结,网上找了找资料,实现了;在这给大家分享;
给一个例子冻结一列:
<html>
<head>
<title>Table列冻结</title>
<style type="text/css">
<!--
.scrollSpanX
{
vertical-align: top;
overflow-x: scroll;
text-align: left;
border: 1px solid;
}
.scrollSpanX TABLE
{
table-layout: fixed;
}
.scrollBodyX TR
{
position: relative;
}
.scrollBodyX TD
{
position: relative;
border-right: 1px solid;
border-bottom: 1px solid;
text-align: center;
word-break:break-all;
width: 128px;
}
.scrollFixedRowX TD
{
position: relative;
font-weight: bold;
background-color: #E9E9E9;
}
.scrollFixedColX
{
position: relative;
left: expression(this.parentElement.offsetParent.scrollLeft);
background-color: #E9E9E9;
z-index: 1;
}
-->
</style>
</head>
<body>
<div class="scrollSpanX" style="height:190px; width:640px;">
<table class="scrollBodyX" border="0" align="left" cellpadding="2" cellspacing="0">
<thead class="scrollFixedRowX">
<tr>
<td align="center" nowrap class="scrollFixedColX">序号</td>
<td align="center" nowrap> Test1</td>
<td nowrap> Test2</td>
<td nowrap> Test3</td>
<td nowrap> Test4</td>
<td nowrap> Test5</td>
<td nowrap> Test6</td>
</tr>
</thead>
<tbody id="tblListBody">
<tr>
<td align="center" class="scrollFixedColX">001</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center" >Test</td>
</tr>
<tr>
<td align="center" class="scrollFixedColX">002</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center" >Test</td>
</tr>
<tr>
<td align="center" class="scrollFixedColX">003</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center" >Test</td>
</tr>
<tr>
<td align="center" class="scrollFixedColX">004</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center" >Test</td>
</tr>
<tr>
<td align="center" class="scrollFixedColX">005</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
</tr>
<tr>
<td align="center" class="scrollFixedColX">006</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
</tr>
<tr>
<td align="center" class="scrollFixedColX">007</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
</tr>
<tr>
<td align="center" class="scrollFixedColX">008</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
</tr>
<tr>
<td align="center" class="scrollFixedColX">009</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
<td align="center">Test</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
另外还有一个冻结行和列的例子供大家参考;
一个jquery的例子参考:http://blog.csdn.net/digyso888/archive/2010/10/22/5959228.aspx
分享到:
相关推荐
基于jquery 实现 对已有table表冻结行列、冻结行、冻结列,兼容主流浏览器。代码中有详细的注释说明,有使用案例。实际使用中如果发现有缺陷,欢迎留言提建议,或联系
bootstrap-table-冻结列样例,bootstrap-table-冻结列样例,bootstrap-table-冻结列样例,
bootstrap-table冻结列例子
绝对可用,绝对开源 资源包括两个原型 个人感觉非常好,很有实用性哦
在原bootstrap-table-fixed-columns的基础上,解决了冻结列后,排序失效、列宽错位和合并行失效问题
table的行列冻结
同时冻结行与列的Table for .net .net 基于jquery环境下面实现的冻结行与列
JQUERY冻结table列, 多列或者单列都可以控制,仿excel的冻结列。 或者列过多,固定前两列保持不动 固定列
HTML 实现行、列冻结功能,使用了javascript、jquery 的方式实现了类似excel冻结的功能。
基于bootstrap-table 实现 右侧列固定,也可以针对左侧列固定,针对操作列使用起来非常方便,引用jquery、bootstrap-table-fixed 样式和js文件后,可以随意设置,灵活。 fixedColumns: true,//fixedtNumber:2, //...
前几天有人问我,在Web开发当中,固定表格 的行和列,怎么做比较简单一点,我在这这里做了几个Demo,适用于table,当然也适用于各种表格控件。希望大家有时间看一下。Css学好是很重要的
页面显示表格,表格的首行冻结,首列冻结,最后一行也冻结,实现数据查看和合计查看的效果。DemoDemoDemoDemo
BootStrap-table 表格固定列,固定左侧列以及右侧列,可以固定特定的列,fixedColumns: true, fixedNumber: 2,fixedRightNumber:1,值可以自定义,一定要使用配套(压缩包就是配套的相关文件)的内容,否则会出现一些...
前言:一年前,博主分享过一篇关于bootstrapTable组件冻结列的解决方案 JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 ,通过该篇,确实可以实现bootstrapTable的冻结列效果,并且可以兼容...
html的table滚动时固定首行和首例,网上多为3个table拼合实现,现使用一个table实现
基于jquery的冻结行冻结列插件,可以支持复合表头,对原业务代码侵入较小,非常适合需要实现固定行列对table场景
javascript 绘制表格table,可以固定首行,首列,其他内容滚动显示.兼容ie,firefox,chrome等浏览器.
css样式冻结表头,右侧滚动条滑动,表头锁定不动;...css样式冻结首列,下侧滚动条滑动,首列锁定不动; 另外,表中首列添加了复选框,css样式,仅供参考学习,可以根据情况改动 适合菜鸟初学,大神高手会觉得简单绕行
基于jquery 实现 table 行冻结、列冻结,本来想免费分享给大家,可是csdn要求最低必须是2分,希望大家用的好