README

无需特殊CSS即可浮动表头。此插件不假设你的表格标记，并且在不丢失事件或样式的的情况下“直接工作”。支持在窗口内或容器内滚动时浮动头部。与AngularJS和datatables以及编写良好的插件兼容。

😻我的猫喜欢它😻

查看示例/文档页面以获取大量示例

bower install floatThead

功能

浮动表头 - 在您滚动时保持在视图中
在可滚动的容器或整个窗口滚动时工作
水平或垂直滚动
不会克隆thead - 因此您的事件仍然绑定
不会干扰您的样式
适用于任何表格
无需特殊CSS
与datatables、perfect-scrollbar、bootstrap等库兼容
屏幕阅读器支持
与angularjs兼容

它不做什么

不会浮动页脚
不允许您锁定第一列，就像在Excel中一样
不支持Safari和移动Safari。它可能工作，也可能不工作，这取决于您的标记和Safari版本。

常见错误

如果您使用CSS和HTML的最佳实践，此插件将正常工作。如果您还停留在1999年，您最好阅读此内容。

如何获得floatThead的帮助

所有问题都应通过github报告。如果您没有账户，您可以创建一个。
提供以下信息将大大提高您的问题得到迅速解决的机会

包括您遇到问题的浏览器和操作系统。如果是IE，截图也很好，因为我无法快速访问这个怪物。
提供一个尽可能简单的jsfiddle来重现您的问题。如果您的代码难以阅读，您就做错了。
问题的描述和重现步骤

我将尽我所能及时帮助您。

下载/安装

下载

CDN托管

cdnjs: http://cdnjs.com/libraries/floatthead/
jsdelivr: http://www.jsdelivr.com/#!jquery.floatthead

通过Bower

使用Bower安装

bower install floatThead

通过NPM

npm install floatthead

Webjar for Maven, Gradle, SBT

https://github.com/webjars/floatThead

要求

jQuery 1.8.x 或更高版本（1.9 兼容）（或 jQuery 1.7.x 和 jQuery UI 核心库）

支持的浏览器

IE8 或更高版本（阅读这里）
现代浏览器

演示 & 文档

DEMOS 和文档

与 AngularJS 一起使用

我没有编写官方指令，但其他人已经编写了包装器
https://github.com/brandon-barker/angular-floatThead

与 IE9 一起使用

除非你在页面头部添加以下 meta 标签，否则 FloatThead 在 IE9 中无法正常工作

<meta http-equiv="X-UA-Compatible" content="IE=11; IE=10; IE=9; IE=8; IE=7; IE=EDGE" />

对于非常大的表格，你也可能会遇到这个令人兴奋的错误：http://stackoverflow.com/questions/5805956/internet-explorer-9-not-rendering-table-cells-properly
请注意。

变更日志

1.3.1

允许使用 'useAbsolutePositioning'、'scrollingTop' 和 'scrollingBottom'，但将通过 console.error 提示

1.3.0

重大更改：将 'useAbsolutePositioning' 选项重命名为 position。值映射（旧值 -> 新值）为：[true -> 'absolute', false -> 'fixed', null -> 'auto']
重大更改：将 'scrollingTop' 重命名为 top，将 'scrollingBottom' 重命名为 bottom
重大更改：删除了 cellTag 和 debounceResizeMs 选项
重大更改：从 $floatContainer 中删除了 floatThead-floatContainer 类，因为 floatThead-container 类已经存在，并且可以通过 floatContainerClass 选项进行配置。
添加了 autoReflow 选项
mkoryak#235 - 修复了浮动标题的 tabindex（感谢 robinpoort）
mkoryak#242 - 在单个滚动 div 中支持多个表格
mkoryak#246 - enableAria: true 在使用 Colgroup 时会导致 JavaScript 异常
修复了在标题浮动时损坏的 getRowGroups 方法
使 grunt 在 node 0.12 中工作

1.2.13

mkoryak#220 - 标题和主体对齐问题
package.json 不正确
autoReflow 选项如果您的浏览器支持 MutationObserver，应该工作得更好
添加了对 bootstrap3 tabs 或 jqueryui tabs 中的表格的原生支持
如果表格被隐藏，当您滚动时插件不会尝试做任何事情
这只猫很可爱

1.2.12

非常感谢 CoryDuncan、ithielnor、jurko-gospodnetic 和 mhwlng 提交的 PR

mkoryak#168 - 支持分数列宽（不再有对齐问题！）
mkoryak#175 - 表格嵌套在表格中不会引起奇怪的问题
mkoryak#165 - 当标题浮动/取消浮动时触发事件
mkoryak#180 - 表格外没有空间会导致它始终浮动
mkoryak#185 - 内部滚动不尊重容器边框
mkoryak#186 - 可以在无thead的表格上初始化，然后添加thead
mkoryak#194 - 头部尺寸考虑了border-collapse规则
一堆代码和样式清理

1.2.11

现在支持perfect-scrollbar插件
对移动Safari的支持略有改进
修复bower.json

1.2.10

与angularjs友好配合，如果它修改了DOM
通过enableAria选项支持屏幕阅读器
mkoryak#122 - 为ie提供更好的默认选项
mkoryak#121 - 头部布局错误
mkoryak#128 - 某些布局中滚动条大小检测问题
mkoryak#127 - destroy没有删除一些元素

1.2.9

弃用了cellTag选项，请使用headerCellSelector代替（见文档）
mkoryak#101 - 巨大的性能提升
mkoryak#98 - 在滚动时忽略border-collapse
mkoryak#99 - 某些情况下滚动宽度计算错误
对destroy方法进行了一些更新，使表格恢复到更原始的状态

1.2.8

mkoryak#82 - 在某些布局中，当表格不可见时不消失
mkoryak#84 - 如果滚动容器有特定的高度，则头部未对齐
mkoryak#86 - 在计算头部高度时，不考虑隐藏的TR

1.2.7

更改许可证为MIT

1.2.6

新功能
增加了对具有现有<colgroup>元素表格的支持
增加了一个构建dist到master的grunt任务
错误修复
mkoryak#57 - 窗口调整大小时的Windows问题
mkoryak#70 - 对响应式表格的支持更好
mkoryak#71 - 在destroy中错误地解绑事件
mkoryak#75 - 在destroy中DOM泄漏

1.2.5

1.2.4

对非常宽的表格提供了更好的支持
修复了mkoryak#53
修复了mkoryak#56

1.2.3

移除了underscore依赖，添加了一个slim版本，它非常小，需要underscore
现在支持一些仍被人们使用的已弃用表格属性：cellpadding和cellspacing
修复 mkoryak#52
修复 mkoryak#50
添加了 floatWrapperClass 选项
添加了 copyTableClass 选项

1.2.2

更好地支持动态隐藏列的表格
现在可以设置浮动表头的容器 div 的类

1.2.1

修复了 caption 标签 align:bottom 的问题
切换到 uglifyjs 用于压缩代码

1.2.0

caption 标签支持
处理大型表格（和小型表格）时的初始化更快

1.1.1

修复了 1.0.0 版本中引入的导致 IE9 出现问题的bug

1.0.0

更新代码以符合 jQuery 1.9+ 规范

谁在使用 floatThead ?

您的网站？请通过电子邮件联系我：我的姓氏 @ gmail

其他插件

有许多其他 固定表头 / 浮动表头 / 滚动表头 插件试图做这个插件同样的事情。它们都不支持窗口和溢出滚动，其中许多依赖于特殊的 CSS 或需要您设置表格列宽。其中一些不错，而一些则很差。您也可以去检查它们。

我在这里列出了一个包含每个插件评论的列表

| 插件 | 窗口滚动 | 溢出-X 滚动 | 溢出-Y 滚动 | 无特殊 CSS | 保持事件绑定 | 冻结列 | |:-------------:|:-------------:|:-----:|:-------------:|:-------------:|:-----:|:-----:|:-----:| | FloatThead | 是 | 是 | 是 | 是 | 是 | 否 | | Fixed-Table-Header | 否 | 是 | 否 | 是 | 否 | 否 | | jquery.scrollTableBody | 否 | 是 | 是 | 否 | ?? | 否 | | Fixed table rows cols | 否 | 是 | 是 | 否 | ?? | 是 | | Table Fixed Header | 是 | 否 | 否 | 是 | 否 | 否 | | Sticky Table Header | 是 | 否 | 否 | 是 | 是 | 否 | | Grid | 否 | 是 | 是 | 是 | 是 | 否 |

Fixed-Table-Header 这是原始的。它已经存在很久了，并且当您开始寻找时，这是您找到的第一个插件。它也有大量的未解决的开源问题。它不支持窗口滚动，它似乎也不支持容器内的 y 滚动。它会丢失您附加到 thead 的事件。有很多未解决的问题。 远离它。

Fixed table rows cols 不支持窗口滚动。要求您指定表格的列宽。这意味着表格将无法优化布局。它支持冻结列。如果您需要这个功能，这个插件可能适合您。

jquery.scrollTableBody 不支持窗口滚动。这是一个新出现的项目，不是一个成熟的项目。单元格填充存在一些主要问题。在问题解决之前，请远离。

Grid 这个库与其他库非常不同，因为它主要用于提供可排序的网格。您不能在现有的表格上运行此插件 - 您需要提供json或xml数据源。这是一个优秀的轻量级datatables替代品。如果您不打算转换现有表格，这可能就是您需要的插件。

Table Fixed Header 这是一个窗口滚动插件，不支持溢出滚动。当窗口大小改变时，表格宽度变化，其工作不正常。当您滚动过表格时，浮动标题会粘在原处。作者欢迎pull请求，但不会修复问题。请远离。

Sticky Table Header 这是一个窗口滚动插件。不支持溢出滚动。这可能是除了这个之外最好的窗口滚动插件。作者似乎会随着问题的出现而修复它们。

许可证

MIT

intelogie / float-thead

维护者

详细信息