【问题标题】：Resizable table columns with jQuery [closed]使用 jQuery 可调整大小的表列 [关闭]
【发布时间】：2011-09-03 14:42:16
【问题描述】：

This 是我能找到的唯一一个调整表格列宽大小的 jQuery 插件，但它不能很好地与我的表格集成，并且有不必要的膨胀（保存在 cookie 中）。是否有任何其他插件仅用于调整列的大小？（不是数据网格插件，请不要推荐这些）。

如果没有，我会自己写，应该不会太难，我只是不知道如何检测用户何时点击 td 边框（调整大小）。有什么想法吗？

【问题讨论】：

如果您查看您要链接的插件，它会使用一个额外的大小处理程序元素来触发调整大小模式。这是一个很好的策略，因为它还允许使用适当的光标设置该元素的样式。
有趣。你在哪里看到的？
在Demo - Code examples 选项卡中，您可以在列标题的右侧看到一条深色垂直线。该元素由插件添加并用作大小调整处理程序。您可以使用Firebug 之类的工具来了解更多信息。

标签： jquery html html-table resize

【解决方案1】：

:-) 一旦我发现自己处于同样的情况，没有与我的要求匹配的 jQuery 插件，所以我花了一些时间开发自己的：colResizable

关于 colResizable

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

它体积很小（colResizable 1.0 只有 2kb），并且完全兼容所有主流浏览器（IE7+、Firefox、Chrome 和 Opera）。

特点

colResizable 的开发是因为没有找到具有以下列出功能的其他类似插件：

与鼠标和触控设备（PC、平板电脑和手机）兼容
兼容百分比和基于像素的表格布局
调整列大小不会改变表格总宽度（可选）
不需要外部资源（例如图像或样式表）
页面刷新或回发后的可选布局持久性
自定义列锚
占地面积小
跨浏览器兼容性（IE7+、Chrome、Safari、Firefox）
活动

与其他插件的比较

colResizable 是最完美的调整表格列大小的插件。它有很多定制的可能性，它也与触摸设备兼容。但可能使 colResizable 成为最佳选择的最有趣的功能是它与基于像素的和流动的百分比表布局兼容。但是，这是什么意思？

如果表格的宽度设置为 90%，并且使用 colResizable 修改列宽，则当调整浏览器大小时，列宽会按比例调整大小。虽然其他插件的行为确实很奇怪，但 colResizable 的工作与预期一样。

colResizable 还兼容 table max-width 属性：如果所有列的总和超过 table 的 max-width，它们会自动修复和更新。

与其他插件相比，另一个很大的优势是它与页面刷新、回发甚至如果表位于 updatePanel 内的部分回发兼容。它与所有主流浏览器（IE7+、Firefox、Chrome 和 Opera）兼容，而其他插件在旧 IE 版本中失败。

请参阅 samples 和 JSFiddle。

代码示例

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

【讨论】：

干得好，但是当我们应用于表格时，有没有办法防止插件更改表格的 th/td/tr 默认填充和宽度。
存在问题，因此不允许在单元格中进行水平填充。据我所知，列的默认宽度没有限制:-)
我试过这个，但它目前不适用于 jquery 1.9.1（或最新版本）。 'TypeError: a.browser 未定义'
嗨@AlvaroPrieto，如果我为每列预定义宽度，然后根据我第一次加载它时设置表格，你能告诉我如何使用这个插件。
这是一个很棒的插件

【解决方案2】：

所以我开始编写自己的，现在只是简单的功能，下周将继续开发......http://jsfiddle.net/ydTCZ/

【讨论】：

【解决方案3】：

这是一个简短的完整 html 示例。见演示http://jsfiddle.net/CU585/

<!DOCTYPE html><html><head><title>resizable columns</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<style>
th {border: 1px solid black;}
table{border-collapse: collapse;}
.ui-icon, .ui-widget-content .ui-icon {background-image: none;}
</style>
<body>
<table>
<tr><th>head 1</th><th>head 2</th></tr><tr><td>a1</td><td>b1</td></tr></table><script>
$( "th" ).resizable();
</script></body></html>

【讨论】：

请注意，我假设问题的目的是弄清楚如何轻松地使表列可调整大小。无需编写插件即可完成此任务。您可以通过 $( "selector" ).resizable() 在 jquery 中执行此操作，其中“selector”是您的选择器，用于查找您希望调整大小的列的。默认情况下，jquery 会为您调整大小的元素添加一些小句柄：我已经设置了样式以便删除这些句柄。
我刚刚安装了最新版本的 Firefox，它对我有用。我怀疑您的 Firefox 版本较旧，或者您的 Firefox 插件无法正常工作。
应用于表格的时候bug太多了。

【解决方案6】：

虽然很晚，但希望它仍然可以帮助某人：

这里和其他帖子中的许多 cmets 都关心设置初始大小。

我使用了jqueryUi.Resizable。初始宽度应在第一行（

）的每个“”标签内定义。这与 colResizable 推荐的不同； colResizable 禁止在第一行定义宽度，我必须在“”标签中定义宽度，这与 jqueryresizable 不一致。

以下 sn-p 非常简洁，比通常的示例更易于阅读：

$("#Content td").resizable({
    handles: "e, s",
    resize: function (event, ui) {
        var sizerID = "#" + $(event.target).attr("id");
        $(sizerID).width(ui.size.width);
    }
});

内容是我的表的 id。句柄 (e, s) 定义插件可以改变大小的方向。必须有jquery-ui的css的链接，否则不起作用。

【讨论】：

应用于表格的时候bug太多了。
所有tds 都必须有一个ID？无法使用
我的代码默认每个 td 都有 id。您也许可以删除该调整大小功能。现在，在此之后，我看到我已将该功能用于特殊目的。只定义句柄就足够了。
您能否为 colResizable 禁止在第一行定义宽度这一事实提供参考？
恐怕不行，对不起，我同时转移到了另一个插件。有一段时间我在比较它们，但没有更多关于 colResizable 的文档或证据。

 <table> <thead> <tr> <th><div class="noCrsr">th 1</div></th> <th><div class="noCrsr">th 2</div></th> </tr> </thead> <tbody> <tr> <td>td 1</td> <td>td 2</td> </tr> </tbody> </table>

$(function() { var pressed = false; var start = undefined; var startX, startWidth; $("table th").mousedown(function(e) { start = $(this); pressed = true; startX = e.pageX; startWidth = $(this).width(); $(start).addClass("resizing"); $(start).addClass("noSelect"); }); $(document).mousemove(function(e) { if(pressed) { $(start).width(startWidth+(e.pageX-startX)); } }); $(document).mouseup(function() { if(pressed) { $(start).removeClass("resizing"); $(start).removeClass("noSelect"); pressed = false; } }); });

table { border-width: 1px; border-style: solid; border-color: black; border-collapse: collapse; } table td { border-width: 1px; border-style: solid; border-color: black; } table th { border: 1px; border-style: solid; border-color: black; background-color: green; cursor: col-resize; } table th.resizing { cursor: col-resize; } .noCrsr { cursor: default; margin-right: +5px; } .noSelect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }