<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.resizeDivClass
{
position:relative;
background-color:red;
width:2;
z-index:1;
left:expression(this.parentElement.offsetWidth-1);
cursor:e-resize;
}
</style>
<script language=javascript>
function MouseDownToResize(obj){
obj.mouseDownX=event.clientX;
obj.pareneTdW=obj.parentElement.offsetWidth;
obj.pareneTableW=theObjTable.offsetWidth;
obj.setCapture();
}
function MouseMoveToResize(obj){
if(!obj.mouseDownX) return false;
var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;
if(newWidth>0)
{
obj.parentElement.style.width = newWidth;
theObjTable.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;
}
}
function MouseUpToResize(obj){
obj.releaseCapture();
obj.mouseDownX=0;
}
</script>
</head>
<body>
改变table的列宽度
<table id=theObjTable STYLE="table-layout:fixed" >
<tr bgcolor=cccccc >
<td valign=top >
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
改变table的列宽度</td>
<td valign=top >
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
改变table的列宽度</td>
<td valign=top >
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
改变table的列宽度</td>
</tr>
<tr>
<td>改变table的列宽度</td><td>改变table的列宽度</td><td>改变table的列宽度</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
改变table的列宽度，可以拖拽的td表格，表格内文字只显示一行，超过的部分自动隐藏
jquery鼠标拖动改变table列宽度，适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。
任意改变table表格td的宽度 动态td的宽度 任意改变table表格td的宽度 动态td的宽度 任意改变table表格td的宽度 动态td的宽度
本程序主要是用table表格拖动改变td宽度。
jQuery+js 实现Table表格可任意拖动调整列宽度大小 适用于列表页等表头拖动宽度设置，完美兼容IE，FireFox，Google Chrome浏览器。
WEB生成的table列宽度固定,单元格内容不换行,内容超过列宽时隐藏,列的宽度可以拖动列来调整,最后一列根据table的宽度自适应.可一通过参数设置列是否允许调整宽度.
vue-easytable表格老版本有表格列宽拖功能，但是最新版插件反而不存在该功能，但是大部分表格数据存在...若将ve-table封装以组件形式引用，可全局实现拖动表格列 改变列宽大小效果。如何封装我也会在资源内详细说明。
用jquery实现table拖拽列功能，可动态改变表格列宽度，并且实现table表格100%的问题，如果列缩小，则自动拉伸最后一列以实现table100%的效果，如果拉伸长度比原长度大，则显示x滚动条。
拖动改变表格列宽度，状态可维持，F5刷新后，列宽的改变仍会保留。 一行语句就可以使用： $("table").colResizable({postbackSafe:true,partialRefresh:true});
bootstrap-table拖拽表格改变列宽，兼容主流浏览器，兼容body与header对齐
修改bootstrap table设置列宽问题，增加插件和bootstrap table组合可随意拖动表格的列宽
NULL 博文链接：https://jifeng3321.iteye.com/blog/2403674
在web中模拟窗口表格控件，可以用鼠标拖动改变表格列宽,兼容Firefox 3.5和IE6浏览器。和之前的一个不同的是这个是固定了table的宽度。 相应函数修改为一下后可适应tabel的border属性取不同值： o.p_p_c_gw=...
实现boostrap表格td宽度可以自由拖动。简单易用，内含源代码
Bootstrap Table可拖动，需要用到它的Resizable扩展插件，下面脚本之家小编给大家带来了Bootstrap Table列宽拖动的方法，感兴趣的朋友一起看看吧
网上找到js或jquery插件都不满足现在用的需求，所自己做个jquery插件. 主要功能类似excel对表头的操作， js文件里有使用说明。
table tr 改变列宽 jquery
拖动列宽的表格</title> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″> <style type=”text/css”><!– .bg td{ font-size:12px; text-align:left; line-height:...
实现鼠标可拖动调整表格列宽度 如图： 一、引入文件： 代码如下: [removed][removed] [removed][removed] [removed][removed] 二、TABLE 代码如下: <table id=”myTable” border=”1″> <thead>