可以调整列宽的表格

今天用JavaScript实现了对表格列宽进行调整的功能。

想要实现表格内的文字在宽度不足时不会被显示出来，网上有人说在TD里面加DIV，谬也。正确的方法是Table的CSS需要有下面的属性：

table-layout:fixed;

TD的CSS需要有：

	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;

程序基础的思路就是在TH里加一个DIV，MouseDown时就改变Body的MouseMove事件，再根据Mouse移动的大小来动态改变Table和TD的Width。

在TH中动态添加DIV时，发现只设置text-align:right在FireFox里不能让新的DIV居右显示，这是因为在FF中要设置新生成的DIV左右的Margin才行，代码如下：

var resize=document.createElement("DIV");
resize.style.width=6;
resize.style.height=10;
resize.style.backgroundColor="#F00";
if(!IE)
{
	resize.style.marginRight="none";
	resize.style.marginLeft="auto";
}
resize.onmousedown=_md;
resize.style.cursor="col-resize";
this.ths[i].style.textAlign="right";
this.ths[i].appendChild(resize);

注意非IE里需要设置的部分。

在改变Body的MouseMove事件时，用到了我写的别一个BodyEventsManager类，原因是如果真的在一个项目中，可能原来Body就已经定义了MouseMove方法，如果直接覆盖就恢复不了啦。在BodyEventsManager中有一个Stack，可以把原有的方法保留住，这样就算是多次改写，只要代码中注意用BodyEventsManager.pop("onmousemove")进行还原，程序是不会出问题的。

附件中的页面可以看到最后实现的效果，在IE和FireFox下通过测试。

评论

4 楼 meimei_gongzhu 2011-08-31  

很强大，谢谢！大牛 [b][/b]

3 楼 qingfeng825 2009-01-04  

借用了，首先谢谢楼主。
不过，我感觉把以下两点改进一下就更好了。
1、TH 中的列名要居中对齐，拉动的DIV居右，不知道楼主可否实现，请辞教。
2、如果TH能够不换行用户体验会更好，不过我想如果要不换行，只能是TH中再套table,分两个TD实现了，有时间我去改改。楼主有更简单的方法也请辞教。

再次感谢楼主，
你真可爱！

2 楼 glacier3 2008-07-12  

你太强了！我写了一天都没有搞出来！

1 楼 reston 2008-05-06  

能看效果就好了