表格列可拖拽宽度

问题

普通表格的列是不可以经过用户操做改变宽度， 即动态改变列的宽度。

有时候， 有的列内容是多的，不够显示， 有的列内容是少的，不用太多宽度显示， 可是内容是动态的， 没法经过编码阶段肯定。

因而提出表格宽度能够拖拽， 改变宽度的需求。

 

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>