Question

我需要使表格单元格在所有方向（垂直和水平）可调整大小。似乎使用jQuery UI resizable小部件几乎完成了这项工作：

$('.table td').resizable();

JSFiddle

但不完全是......我在缩小同一行/列中的元素时遇到了问题，其中同一行/列中的其他元素更大。例如，当您将左上角设置为宽度100px然后尝试将左下角元素设置为50px时，它只是不缩小尺寸，因为同一列中有更宽的元素。

任何想法如何管理？

我尝试了不同的方法，例如将td样式设置为display:inline-block或display:block float:left，但这种情况会变得更糟。

Answer 1

我认为你有更好的运气让tds里面的div重新调整大小：

$('.table td div').resizable();

JSFiddle

Answer 2

好的，我找到了解决方案：

$('.table td').resizable({
    resize: function(event,ui) {
        var col = $(this).index()+1;
        $(this).closest('table').find('tr td:nth-child('+col+')').width(ui.size.width);
        $(this).parent().find('td').height(ui.size.height);
    }
});

Fiddle here

使表格单元格可在所有方向上调整大小

2 个答案: