`

table表格锁定行和列

 
阅读更多

HTML T ABLES WITH F IXED H EADERS AND M ORE

Features:

  • Fixed headers - vertical and horizontal scrolling supported
  • Supports multiple header rows
  • Supports multiple fixed left columns
  • Minimal implementation needed
  • Easy to skin
  • MIT Style License
  • Supports: Firefox 2+, Internet Explorer 5.5+, Safari 3+, Opera 9+ and Chrome (Tested in Windows)

How To Use:

  1. Include superTables.js and superTables.css in the page / template containing your HTML table.
  2. Make sure your table has an id assigned to it. Then, in either your onLoad or onDomReady function, create the new superTable object using the table's id as the parameter along with any options you choose.
  3. Available options: variable data type note
    cssSkin string eg. "sDefault", "sSky", "sOrange", "sDark"
    headerRows integer default is 1
    fixedCols integer default is 0
    colWidths array (integers) use -1 for auto sizing ( in the array )
    onStart function executed at the start of the script
    onFinish function executed at the end of the script

Examples:

var myST = new superTable("myTableId");
var myST = new superTable("myTableId", {
	cssSkin : "sDefault",
	headerRows : 1,
	fixedCols : 2,
	colWidths : [100, 230, 220, -1, 120, -1, -1, 120],
	onStart : function () {
		this.start = new Date();
	},
	onFinish : function () {
		alert("Finished... " + ((new Date()) - this.start) + "ms.");
	}
});
 

 

 

表格内容过多,锁定行和列效果刚刚的...

 

 

 copy from:http://www.matts411.com/post/super_tables/

分享到:
评论

相关推荐

    HTML页面table表格固定行和列

    这个例子中,我们使用了CSS Grid将表格分为两部分,左侧固定列和右侧可滚动列。`position: sticky`属性使表头在滚动时保持在视口顶部,`left: 0`确保它固定在左侧。 对于更复杂的情况,例如,当表格有交错的表头...

    table表格锁定的例子

    在处理大量数据时,为了提高用户体验,可能会需要实现表格的部分区域固定,比如表头(Header)在滚动时始终保持可见,这种效果被称为表格锁定或冻结列。在提供的代码片段中,我们可以看到一个实现了表格锁定的示例。...

    table固定行和列

    在Web开发中,表格(Table)是展示数据的常用元素,但如何实现表格的固定行和列是一项常见的需求。这通常涉及到CSS样式控制,以便在滚动时保持特定行或列始终可见,提升用户浏览大量数据时的体验。下面将详细探讨...

    html表格中,锁定行头和列头

    在html的表格中,锁定行头和列头,使用样式表,不用加载第三方控件.

    兼容浏览器的table行列锁定

    2. CSS样式设置:为锁定的行和列设置`position: fixed`,并根据需要设置宽度、高度、z-index等属性,以确保它们始终位于正确位置。 3. JavaScript处理:监听滚动事件,当表格内容滚动时,调整锁定元素的位置。这里...

    很好用的 表格锁定表头 和列

    当我们处理大量数据时,保持表头和特定列固定可以极大提升用户的浏览体验,这正是"表格锁定表头和列"功能的核心价值。这个功能使得用户在滚动页面时,表头和指定列始终保持可见,方便对比和理解数据。 标题"很好用...

    js实现html table 行,列锁定的简单实例

    3. 接下来,函数创建了四个新的div元素,分别用于存放锁定的表头(`_tableHead`)、锁定的列(`_tableColumn`)、浮动的数据部分(`_tableData`)以及一个用于克隆表头和锁定列的临时div(`_tableFix`)。...

    js实现像excel表格锁定功能,拖动滚动条指定锁住的列不滚动

    js实现像excel表格锁定功能,拖动滚动条指定锁住的列不滚动,内容使用的是table表格 使用代码: var Options = { table : "tb", width : 600, height : 300, rows : 1, cells : 2 } new Fixed(Options);

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

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

    javascript 绘制表格table,可以固定首行,首列

    javascript 绘制表格table,可以固定首行,首列,其他内容滚动显示.兼容ie,firefox,chrome等浏览器.

    js Table 选中行排序 多列锁定(多个OrderBy)

    2. 定位与同步:通过CSS定位使新表格与原表格的锁定列对齐,并监听滚动事件,使得可滚动表格的滚动与锁定列同步。 在实际开发中,兼容性也是一个重要考虑因素。"IE6 Opera 测试通过"表明这个解决方案至少在这些老...

    table的锁定行列

    表格的行列锁定,采用js+css将table的行头列头冻结,自我感觉已经比较较完美了

    移动端table固定表头与固定第一列

    总结起来,实现移动端table的固定表头与固定第一列,主要涉及HTML5的表格结构、CSS的定位和层叠上下文以及可能的JavaScript滚动事件处理。通过这些技术,我们能够在移动端提供更好的数据浏览体验。

    HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列

    table表格完美指定固定行列方法,可以按照自己的需要定制自己的锁定列,只需要传入简单的几个参数即可,看完你会谢我的!如果不好使用的话可以联系我,我可以指导你们。测试过兼容的浏览器有谷歌,火狐,IE11!

    H5 表格冻结首行,首列和最后一行

    页面显示表格,表格的首行冻结,首列冻结,最后一行也冻结,实现数据查看和合计查看的效果。DemoDemoDemoDemo

    vue表格实现固定表头首列

    在Vue移动端项目中,开发人员经常遇到需要创建具备固定表头和首列的表格,以提供良好的用户体验。本文将详细讲解如何在不依赖任何UI框架或插件的情况下,利用Vue的核心特性实现这样一个功能。 首先,我们需要理解...

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

    在提供的压缩包文件中,"锁定表头和固定列(Fixed table head and columns) _files"很可能包含了实现此功能所需的CSS和JavaScript文件,而".htm"文件则是一个示例HTML页面,展示了如何将这些技术应用到实际的表格中。...

    html的table滚动时固定首行和首列

    html的table滚动时固定首行和首例,网上多为3个table拼合实现,现使用一个table实现

    基于bootstrap-table 实现 右侧列固定

    基于bootstrap-table 实现 右侧列固定,也可以针对左侧列固定,针对操作列使用起来非常方便,引用jquery、bootstrap-table-fixed 样式和js文件后,可以随意设置,灵活。 fixedColumns: true,//fixedtNumber:2, //...

    QT表格固定第一列,拖动时第一列不会遮挡

    这个功能对于处理大量数据或多个列的表格尤其有用,因为它可以提高可读性和导航效率。 QT框架提供了丰富的API和工具来实现这样的自定义行为。首先,你需要创建一个继承自QTableView或QTableWidget的子类,以便我们...

Global site tag (gtag.js) - Google Analytics