本文档通过使用jQuery和colResizable插件展示了如何实现在网页上动态调整表格列宽的功能。该示例提供了完整的HTML页面结构及JavaScript代码，使得用户能够直观地看到每列宽度改变的效果。
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<script src="jquery.js"></script>
<script src="colResizable-1.3.min.js"></script>
<script type="text/javascript">
$(
function()
{
var onSampleResized = function(e)
{
var columns = $(e.currentTarget).find("th");
};
$("#sample2").colResizable({
liveDrag:true,
gripInnerHtml:"<div class='grip'></div>",
draggingClass:"dragging",
onResize:onSampleResized});
}
);
</script>
</head>
<body>
<div class="center" >
<br/><br/>
</div>
<table id="sample2" width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<th>header</th><th>header</th><th>header</th>
</tr>
<tr>
<td class="left">cell</td><td>cell</td><td class="right">cell</td>
</tr>
<tr>
<td class="left">cell</td><td>cell</td><td class="right">cell</td>
</tr>
<tr>
<td class="left bottom">cell</td><td class="bottom">cell</td><td class="bottom right">cell</td>
</tr>
</table>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
