Resizable columns是一个易于使用的jQuery插件，允许您通过鼠标拖动来调整HTML表列的大小。

参见：

• 用于可调整大小的表列的jQuery插件-可调整大小列
• 用于可拖动可调整大小的表列的jQuery插件-colResizable

如何使用它:

1.加载jQuery可调整大小的列插件的文件。

<!-- jQuery Is Required -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>

<!-- jQuery resizable-columns -->
<link rel="stylesheet" href="dist/jquery.resizableColumns.css" />
<script src="dist/jquery.resizableColumns.min.js"></script>

2.加载store.js库，将当前列宽保存在本地存储器中。可选。

<script src="/path/to/cdn/store.min.js"></script>

3.添加可调整数据大小的列id属性设置为应可调整大小的表列。可选。

<table data-resizable-columns-id="demo-table">
  <thead>
    <tr>
      <th data-resizable-column-id="#">#</th>
      <th data-resizable-column-id="first_name">First Name</th>
      <th data-resizable-column-id="last_name">Last Name</th>
      <th data-resizable-column-id="username" id="username-column" data-noresize>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

4.调用HTML表上的插件并完成。

$(function(){
  $("table").resizableColumns({
    // optional
    store: window.store,
  });
});

5.所有默认插件选项。

$("table").resizableColumns({
  selector: function selector($table) {
    if ($table.find('thead').length) {
      return _constants.SELECTOR_TH;
    }
    return _constants.SELECTOR_TD;
  },
  store: window.store,
  syncHandlers: true,
  resizeFromBody: true,
  maxWidth: null,
  minWidth: 0.01
});

预览截图

拖动并调整HTML表列 大小 jQuery可调整大小 列