遇到需求固定表格尾列,尾列是操作(查看,删除)这些
尝试了css,js,jquery,插件,layui,elementui各种都没用
freeze-table(一个固定表格插件)
npm install -g bower
bower -v
有版本显示就成功
①在用bower install /update xxx 时出现 “EINVALID Name must be lowercase, can contain digits, dots, dashes, "@" or spaces”问题。
这个是说目录的名字有问题,我起的名字目录名html&css,中间&触发了这个报错,删掉就没了
②
卡这两行不动了
ctrl+c强制停止运行,再运行一遍试试

使用

别忘了先导jQuery的js


具体使用
yidas/jquery-freeze-table Demo
Options
Options could be passed via JavaScript with object.
| Name | Type | Default | Description |
|---|---|---|---|
| freezeHead | boolean | true | Enable to freeze <thead> |
| freezeColumn | boolean | true | Enable to freeze column(s) |
| freezeColumnHead | boolean | true | Enable to freeze column(s) head (Entire column) |
| scrollBar | boolean | false | Enable fixed scrollBar for X axis |
| fixedNavbar | string|jQuery|Element | '.navbar-fixed-top' | Fixed navbar deviation consideration. Example: '#navbar' |
| scrollable | boolean | false | Enable Scrollable mode for inner scroll Y axis |
| fastMode | boolean | false | Enable Fast mode for better performance but less accuracy |
| namespace | string | 'freeze-table' | Table namespace for unbind |
| container | string|jQuery|Element | false | Specify a document role element that contains the table. Default container is window. This option is particularly useful in that it allows you to position the table in the flow of the document near the triggering element - which will make the freeze table support in containers such as Bootstrap Modal. Example: '#myModal' |
| columnNum | integer | 1 | The number of column(s) for freeze |
| columnKeep | boolean | false | Freeze column(s) will always be displayed to support interactive table |
| columnBorderWidth | interger | 1 | The addon border width for freeze column(s) |
| columnWrapStyles | object | null | Customized CSS styles for freeze column(s) wrap. {'style': 'value'} |
| headWrapStyles | object | null | Customized CSS styles for freeze head(s) wrap. {'style': 'value'} |
| columnHeadWrapStyles | object | null | Customized CSS styles for freeze column-head wrap. {'style': 'value'} |
| callback | function | null | Plugin after initialization callback function |
| shadow | boolean | false | Enable default box-shadow UI |
| backgroundColor | string|boolean | 'white' | Default table background color for Boostrap transparent UI. white, #FFFFFF, rgb(255,255,255,1), or false to skip. |
上面这玩意不太行,下面这个厉害,
FrozenTable(上,下,左,右)可以填数字固定任意地方
(题外话,要是有插件还能在此基础固定任意行任意列就好了)0。0
TableFreeze.js(基于JQuery的表格冻结插件)
这个好用
看效果
TableFreeze表格冻结 (christopherkeith.github.io)
源代码
GitHub - CHristopherkeith/TableFreeze
结局 :还是没用,但是上面这个插件功能确实强大,原因是表格的内容是对接后端动态生成的,
而且渲染优先级高,也就是是相当于在原来表格上面贴图了,加载有问题时页面只有表格第一行表头,过长滑动时第一行也定死不动,只能从js动态加载的代码处想办法了。












![[附源码]SSM计算机毕业设计“云味坊”购物网站JAVA](https://img-blog.csdnimg.cn/6e1d891bbc7f415a95be21b732fff5db.png)






