表格列可拖拽宽度
问题
普通表格的列是不能够通过用户操作改变宽度, 即动态改变列的宽度。
有时候, 有的列内容是多的,不够显示, 有的列内容是少的,不用太多宽度显示, 但是内容是动态的, 无法通过编码阶段确定。
于是提出表格宽度可以拖拽, 改变宽度的需求。
Bootstrap Table
这个样式库提供了表格样式的友好展示, 但是并不支持表格宽度可拖拽。
https://bootstrap-table.com/
Bootstrap Table
An extended table to the integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation)
Bootstrap Table has been designed to reduce development time and to require no specific knowledge from developers. It is both featherweight and feature-rich.
可拖拽插件
https://examples.bootstrap-table.com/#extensions/resizable.html
https://github.com/dobtco/jquery-resizable-columns
jquery-resizable-columns
Resizable table columns for jQuery. Live Demo
New and Improved! Now tested and working on Chrome & Firefox (Mac + Windows), and IE 9 + 10. Other browsers might work too, just haven't had time to check.
Size: < 8kb minified
Dependencies
- jQuery
- store.js (or anything similar) for localStorage persistence.
Simple Usage
<table> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> ... </tbody> </table> <script> $(function(){ $("table").resizableColumns(); }); </script>
相关文章
- 如何使用Excel表格状态栏动态查看统计
- Word绘制跨行表格
- 数据库表格所占空间及索引所占空间情况
- HTML:表格基本操作~笔记
- 另类爬虫:从PDF文件中爬取表格数据
- latex自适应resize超长表格
- element ui 表格分页二次封装使用mixins/表格全选单选二次封装使用mixins
- jQuery EasyUI API 中文文档 - ComboGrid 组合表格
- Apache POI Crack,表格数据和生成文档索引
- 10.11杭州Clouder lab 十分钟搭建共享应用1:函数计算及表格存储操作说明
- element表格在Safari浏览器下面对不齐?
- 用css控制表格的内容,使其在固定宽度后换行。