The width of the table columns drag

problem

Common table column is not capable of changing the width of the user's operation, i.e., dynamically changing the column width.

Sometimes, there is a multi-column content, the show is not enough, some columns content is small, not too much width of the display, but the content is dynamic, can not be determined by the coding phase.

So proposed width of the table can be dragged to change the width of demand.

 

Bootstrap Table

This style library table style provides a friendly show, but does not support table width can drag.

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.

 

 

You can drag plug-ins

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>