js 鼠标拖动自由调节表格的列宽

最新推荐文章于 2023-12-07 10:06:40 发布

liujizhong

最新推荐文章于 2023-12-07 10:06:40 发布

阅读量3.1k

点赞数 2

分类专栏： JavaScript 文章标签： function null javascript table class html

本文链接：https://blog.csdn.net/liujizhong/article/details/7961485

版权

鼠标拖动调整列宽的js程序，大体的要求是控制table的总宽度不变，拖动表格列的时候只改变当前列和它之后相邻列的宽度，其他的表格列不受影响。

实现思路：每一列中用一个span来响应拖动事件，在onmousemove事件中计算当前列和其后相邻列的宽度变化并赋予每列新的宽度值。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
table{
	border-left:1px solid black;
	width:100%;
	border-top:1px solid black
}

td{
	border-bottom:1px solid black;
	border-right:1px solid black;
	white-space:nowrap;		/*不换行*/
	overflow:hidden;
	text-overflow:ellipsis;	/*文本超出部分用"..."代替*/
}

.resizeDivClass{
	PADDING-RIGHT: 0px;
	MARGIN-RIGHT: 0px; 
	float:right;
	cursor:e-resize;
	HEIGHT: 100%; 
	width:2px;
}
</style>

<script language="javascript" type="text/javascript">

var dragobj=null;    //保存用户选择的"span"

//handle onmousedown event 
function MouseDow

最低0.47元/天解锁文章

liujizhong

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
js 鼠标拖动自由调节表格的列宽

鼠标拖动调整列宽的js程序，大体的要求是控制table的总宽度不变，拖动表格列的时候只改变当前列和它之后相邻列的宽度，其他的表格列不受影响。实现思路：每一列中用一个span来响应拖动事件，在onmousemove事件中计算当前列和其后相邻列的宽度变化并赋予每列新的宽度值。代码如下：table{ border-left:1px solid black; wi
复制链接

扫一扫

专栏目录