`
greemranqq
  • 浏览: 977038 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

简单表头锁定(转)

阅读更多

转:http://www.cnblogs.com/TNSSTAR/archive/2012/03/21/2409223.html

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="jquery.chromatable.js"></script>
<script>

    $(document).ready(function () {

        $("#yourTableID2").chromatable({

            width: "900px", // specify 100%, auto, or a fixed pixel amount
            height: "400px",
            scrolling: "yes" // must have the jquery-1.3.2.min.js script installed to use

        });
    });
</script>

 

<table id="yourTableID2" width="100%" border="0" cellspacing="0" cellpadding="0">
<thead>
 <tr>
  <th>Check out this header</th>
  <th>Look here's another one</th>
  <th>Wow, look at me!</th>
 </tr>
</thead>
<tbody> 
 <tr>
  <td>Some content goes in here</td>
  <td>Praesent vitae ligula nec orci pretium vestibulum</td>
  <td>Maecenas tempus dictum libero</td>
 </tr>
 <tr>
  <td>Quisque in wisi quis orci tincidunt fermentum</td>
  <td>Mauris aliquet mattis metus</td>
  <td>Etiam eu ante non leo egestas nonummy</td>
 </tr>
 <tr>
  <td>Some content goes in here</td>
  <td>Praesent vitae ligula nec orci pretium vestibulum</td>
  <td>Maecenas tempus dictum libero</td>
 </tr>
 <tr>
  <td>Quisque in wisi quis orci tincidunt fermentum</td>
  <td>Mauris aliquet mattis metus</td>
  <td>Etiam eu ante non leo egestas nonummy</td>
 </tr>
</tbody> 
</table>

分享到:
评论

相关推荐

    html行列表头锁定

    在网页设计中,"html行列表头锁定"是一种常见的需求,尤其在处理大数据表格时,为了保持用户在滚动查看表格内容时能始终看到列标题,就需要实现表头的固定锁定。这种技术通常应用于数据可视化、报表展示或者数据分析...

    表头锁定js (基于Jquery)

    本项目提供的是一种基于jQuery实现的"表头锁定js",通过简单地引入js文件,就能轻松实现这个功能。 jQuery是一款广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互,使得开发者可以更高效地...

    js控制锁定表头表列

    在提供的压缩包文件"锁定表头表列"中,很可能包含了一个简单的示例项目,可能包括HTML文件(用于构建表格结构)、CSS文件(用于样式设计)和JavaScript文件(用于实现滚动监听和元素操作)。通过学习这个示例,你...

    jquery 锁定表头和固定列(Fixed table head and columns)

    前段时间需要这个功能,但是找了很多都不能完美的实现,不是只能锁定表头,就是浏览器兼容问题什么的,在此就自己做了一个锁定表头和列的js方法,依赖于JQuery。 因为方法很简单,就未封装成插件的形式,仅仅以代码...

    PHPExcel冻结(锁定)表头的简单实现方法

    以上代码展示了如何使用PHPExcel锁定表头的操作,非常简单直接。在实际的项目开发中,这种技术可以极大地提升用户体验,特别是在处理大型数据表格时。 此外,本文提到的内容还包括了对PHPExcel的简单介绍和一些操作...

    JS冻结表格,锁定表头,固定行列(上下左右4个方向)

    JS冻结窗格(表头锁定)插件,自适应表格单元格宽度,兼容主流浏览器(注:不兼容IE9以下版本的IE浏览器),代码调用方式 $.frozen(tableElement或tableId,{参数...},force:是否强制冻结,因为有防止重复冻结功能),...

    实现固定表头表格的总结

    下面是一个简单的JavaScript实现: ```html &lt;!DOCTYPE html&gt; table { width: 100%; border-collapse: collapse; } thead { position: fixed; top: 0; left: 0; width: 100%; } tbody { overflow-y:...

    table冻结表头

    总之,"table冻结表头"插件通过简单的集成和配置,为网页中的表格带来了强大的功能,帮助开发者解决了滚动时表头丢失的问题,提高了用户的交互体验。对于需要处理大量数据展示的项目,这款插件是不可或缺的利器。

    WPF设置表头

    这个项目可能包括了一个简单的WPF窗口,展示了如何动态创建和管理Datagrid的列,以及如何处理用户对表头显示的自定义设置。通过研究这个示例,你应该能更好地理解如何在WPF中实现动态Datagrid的表头设置。

    Android可固定表头和第一列自定义表格

    Android可固定表头和第一列自定义表格,集成简单。 API使用说明: LockTableView mLockTableView=new LockTableView(this,mContentView,mTableDatas); mLockTableView.setLockFristColumn(true) //是否锁定第一列 ...

    table 锁表头

    使用CSS的`position`属性可以实现简单的表头锁定。将`&lt;thead&gt;`设置为`position: fixed`,并调整适当的宽度和top值,使其始终保持在屏幕顶部。但这种方法在响应式布局中可能存在问题,因为固定定位可能不适应不同...

    最简单最实用的WEB表格锁定表头和固定数据列的方法示例

    最简单最实用的WEB表格锁定表头和固定数据列的方法示例,提升WEB版的ERP系统用户体验。

    html表头冻结行列.rar

    压缩包内的"html锁定表头冻结行列.html"文件,是一个包含JavaScript代码的HTML文件,它的核心原理是通过监听窗口滚动事件,动态调整表头的位置,使其始终位于可视区域顶部。以下是实现这一功能的主要步骤和涉及的...

    css冻结表头冻结第一列

    css样式冻结表头,右侧滚动条滑动,表头锁定不动; css样式冻结首列,下侧滚动条滑动,首列锁定不动; 另外,表中首列添加了复选框,css样式,仅供参考学习,可以根据情况改动 适合菜鸟初学,大神高手会觉得简单绕行

    JS固定表头和左边列

    原生JS写的表头固定及左边列固定功能,原创代码,代码比较简单,兼容IE8+、谷歌、火狐等主流浏览器,当前版本为1.7,此版本修正了性能问题,支持合并后的表格单元格,表格单元格可以不用设置宽度了。当表格总宽度...

    Qt GUI图形图像开发之QT表格控件QTableView,QTableWidget复杂表头(多行表头) 及冻结、固定特定的行的详细方法与实例

    对于表头位置锁定,我们需要从界面初始化开始,让表头m_frozenTableWgt具备:不显示表头,不显示滚动条、设置rowcount为2行并隐藏2行后所有的元素、设置窗口层次在TDMSummaryTableWgt之前、对单元格进行合并等要素。...

    confluence插件tableenhancer

    3. **易用性**:插件的界面直观,用户可以通过简单的设置步骤快速启用或禁用固定表头功能。 4. **性能优化**:尽管增加了额外的功能,但Table Enhancer在设计时考虑了性能,确保不会对Confluence的整体运行速度造成...

    Node.js-LockTableViewAndroid自定义表格支持锁双向表头自适应列宽快速集成

    3. 锁定表头:通过API设置需要锁定的表头行或列。 4. 列宽自适应:开启自动调整列宽的选项,或者根据需要手动设置特定列的宽度。 5. 性能优化:如果数据量大,考虑使用ViewHolder模式以提高滚动性能。 6. 兼容性测试...

    jQuery实现的表头固定效果实例【附完整demo源码下载】

    在本篇文档中,我们将详细探讨如何利用jQuery来实现表格表头固定的效果。这是一项在开发具有滚动功能的数据表格时,非常实用的技术。通过这个技术,即使用户滚动表格,表头仍然能够固定在顶部,从而提高用户界面的...

    Table冻结表头示例代码

    本文将详细解释如何使用JavaScript和HTML实现一个简单的表格冻结表头的功能。 首先,我们需要理解HTML表格的基本结构。一个基本的表格由`&lt;table&gt;`标签定义,包含`&lt;thead&gt;`(表头)、`&lt;tbody&gt;`(表格主体)和`...

Global site tag (gtag.js) - Google Analytics