拖动改变Table的列宽度

收藏自：http://www.cnblogs.com/xieex/archive/2007/12/15/996025.html

<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>
列一</td>
<td valign=top >
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);"
onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
列二</td>
<td valign=top >
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);"
onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
列三</td>
</tr>
<tr>
<td>拖动表列改变table的列宽度</td><td>拖动表列改变table的列宽度</td><td>拖动表列改变table的列宽度</td>
</tr>
</table>
</body>
</html>

转载于:https://www.cnblogs.com/yoyiorlee/archive/2010/10/09/1846952.html

拖动改变Table的列宽度相关推荐

html表格宽度拖拽,Js拖拽实现改变Table的列宽解决方案
Js拖拽实现改变Table的列宽如题,楼主是Js小白,最近遇到问题,需要用Js实现GridView的列拖拽改变大小,在网上找到一段代码如下: function MouseDownToResize(o ...
table设置列宽度
遇到一个表格不能设置宽度(table有宽度,有一两列需要设固定大小的宽度并希望看到展现出来的宽度值与设定的一样,其他的列则可以根据剩余宽度自动填充,但是显示出来的宽度比实际设置的值多了几个像素)这个问 ...
html表格宽度拖拽,原生js实现拖拽改变 table表格列宽
table 员工编号试用时间转正时间性别姓名拼音生日时间民族身高 vh20180421 2018-3-13 2018-6-13 1 LDH 1988-3-13 汉族 178 vh2018 ...
用react-resizable插件来拖动改变ant-ui表格的列宽
项目需求:react项目中,做一个可以通过鼠标拖动改变列宽的表格第一步:安装react-resizable插件 npm install react-resizable --save 第二步:在项目中 ...
html表格第一列长度,表格table列宽度控制colgroup
标签用于对表格中的列进行组合,以便对其进行格式化. 通过使用标签,可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式. 注释:只能在提示:如果想对中的某列定义不同的属性,请在标签内 ...
table列最小宽度 vue_vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)...
mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrolltable.addeventlistener( 'scroll',(event) => ...
html表格不随字数变化,设置table中的宽度不随文字改变让其固定
设置table中的宽度不随文字改变让其固定来源:互联网作者:佚名时间:02-17 16:02:28[大中小] 页面中table宽度设置width之后,宽度仍然不是固定的,文字太长后不换行,下面有 ...
html表格列拖拽,table表格列顺序拖拽和列宽度拖拽
目前项目要求对表格可进行宽度拖拽和排序拖拽.用的第三方库库ant-desigin-vue. 对于列宽度拖拽在ant-desigin-vue的table示例中有对应的案例,但是直接复制代码,会报错.最 ...
ElementUI：表格table列宽度压缩出现空白
表格el-table列宽度被用户压缩后,右侧会出现一块空白 table {width: 100% !important; } 增加样式后,怎么拖拽列宽度,表格的整体宽度都是100%了.

拖动改变Table的列宽度

拖动改变Table的列宽度相关推荐

最新文章

热门文章