html能拖动表格单元格调整其宽度的js库和用法的代码

HTML本身并不直接支持通过拖动调整表格单元格的宽度，因为它是一种静态标记语言。不过，我们可以利用JavaScript库如jQuery UI、 Handsontable 或者 Bootstrap Table等来提供这样的功能。

举个例子，使用jQuery UI的Resizable插件：

<table id="draggable-table" class="ui-widget-content">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格行... -->
  </tbody>
</table>

<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css" rel="stylesheet">

<script>
$( function() {
  $( "#draggable-table th" ).resizable({
    alsoResize: 'td', // 扩展到所有td
    handles: "e", // 只允许东边缩放
    start: function(event, ui) { // 开始时事件
      $(this).addClass('ui-state-highlight'); // 添加样式表示正在编辑
    },
    stop: function(event, ui) { // 结束时事件
      $(this).removeClass('ui-state-highlight'); // 移除样式
      // 获取新的宽度并设置给表格列
      var width = $(this).width();
      $(this).parent().find('td').eq($(this).index()).width(width);
    }
  });
});
</script>

在这个例子中，我们首先引入了jQuery UI库，然后选择所有的表头单元格`<th>`，添加了一个可拖动的resize事件。当开始拖拽时，单元格会被高亮显示；停止拖拽时，会更新对应的表格数据单元格的宽度。