html-使用jQuery可调整大小的表列
这是我可以找到的唯一一个调整表列宽度大小的jQuery插件，但是它与我的表的集成度不高，并且具有不必要的膨胀（节省cookie）。 还有其他用于调整列大小的插件吗？ （不是datagrid插件，请不要建议那些插件）。
如果没有，我会自己写，应该不会太难，我只是不知道如何检测用户何时单击td边框（以调整大小）。 有任何想法吗？
:-)一旦发现自己处在相同的情况下，就没有匹配我的要求的jQuery插件，因此我花了一些时间开发自己的插件：colResizable
关于colResizable
colResizable是一个免费的jQuery插件，用于调整表格列的大小并手动拖动它们。 它与鼠标和触摸设备兼容，并具有一些不错的功能，例如页面刷新或回发后的布局持久性。 它适用于百分比表和基于像素的表布局。
它的体积很小（colResizable 1.0仅2kb），并且与所有主流浏览器（IE7 +，Firefox，Chrome和Opera）完全兼容。
特征
由于未找到具有以下列出的功能的其他类似插件，因此开发了colResizable：
- 与鼠标和触摸设备（PC，平板电脑和手机）兼容
- 与百分比和基于像素的表格布局兼容
- 调整列大小不会改变表格的总宽度（可选）
- 不需要外部资源（例如图像或样式表）
- 页面刷新或回发后的可选布局持久性
- 定制柱锚
- 占地面积小
- 跨浏览器兼容性（IE7 +，Chrome，Safari，Firefox）
- 大事记
与其他插件的比较
colResizable是最精美的插件，可以在那里调整表列的大小。 它具有大量的自定义可能性，并且还与触摸设备兼容。 但是使colResizable成为最大选择的最有趣的功能可能是它与基于像素的表和流体百分比表布局兼容。 但是这是什么意思？
如果将表的宽度设置为90％（例如，将表的宽度设置为90％），并且使用colResizable修改了列的宽度，那么在调整浏览器大小时，列的宽度将按比例调整大小。 尽管其他插件的行为确实很奇怪，但colResizable却按预期工作。
colResizable也与表的max-width属性兼容：如果所有列的总和超过表的最大宽度，它们将被自动固定和更新。
与其他插件相比，另一个巨大的优势是，如果表位于updatePanel内部，则它与页面刷新，回发甚至部分回发兼容。 它与所有主流浏览器（IE7 +，Firefox，Chrome和Opera）兼容，而其他插件在旧IE版本中将失败。
参见示例和JSFiddle。
代码样例
$("#sample").colResizable({
liveDrag:true
});
因此，我现在开始编写自己的，仅是基本的功能，将在下周进行开发... [http://jsfiddle.net/ydTCZ/]
这是一个简短的完整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>
尝试flexigrid，这是另外一个参考
或者尝试我的解决方案：[http://robau.wordpress.com/2011/08/16/unobtrusive-table-column-resize-with-jquery-as-plugin/] :)
尽管很晚，但希望它能对某人有所帮助：
这里和其他帖子中的许多评论都与设置初始大小有关。
我使用了jqueryUi.Resizable。初始宽度应在第一行（<TR>）的每个“ <td>”标签内定义。 这与colResizable建议不同。 colResizable禁止在第一行定义宽度，我不得不在“ <col>”标记中定义宽度，这与jqueryresizable不兼容。
以下代码段非常简洁，比普通示例更易于阅读：
$("#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的链接，否则它将无法工作。
我试图添加到@ user686605的工作中：
1）将光标更改为第th个边框的col-resize
2）修复了调整大小时突出显示文本的问题
我在这两方面都取得了部分成功。 也许某个擅长CSS的人可以帮助实现这一目标？
[HTTP://JS fiddle.net/Telefonica/l2发7F/4/]
的HTML
<!--Click on th and drag...-->
<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>
JS
$(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;
}
});
});
的CSS
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;
}
我已经完成了自己的jquery ui小部件，只是在考虑是否足够好。
[HTTPS://GitHub.com/one KO/col resizable]