如何在可调整大小的表格中设置最小宽度？

Question

我使用可调整大小的Jquery制作了调整大小表。 现在，我面临一个问题。 目标是：

1. 我想设置一个最小宽度（即），它的大小不会超过该宽度

2. 当我调整一列的大小时，另一列的宽度不应更改

我为第一个使用了最小宽度，但是它没有用，我不知道该如何处理第二个。

请帮我

链接在这里

DEMO

<table id="table-css-border-1" class="ui-widget-content">
    <tr>
      <th>header1</th>
      <th>header2</th>
      <th>header3</th>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>

Answer 1

我有同样的问题，但后来我使用colResizable

colResizable是一个免费的jQuery插件，用于调整表格列的大小并手动拖动它们。 它与鼠标和触摸设备兼容，并具有一些不错的功能，例如页面刷新或回发后的布局持久性。 它适用于百分比和基于像素的表格布局

$("#sample").colResizable({
liveDrag:true
});

我相信您的问题将通过此解决。

看看小提琴

适用于有关colResizable http://www.bacubacu.com/colresizable/#usage的文档

Answer 2

尝试在函数中添加minWidth

<script>
    $(function() {
      $("#table-css-border-1 tr th").resizable({
        handles: 'e',
        minWidth:100
      });
    });
</script>

http://api.jqueryui.com/resizable/#option-minWidth