可以调整列宽的表格-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

可以调整列宽的表格

简介: 可以调整列宽的表格 关键字: javascript table 今天用JavaScript实现了对表格列宽进行调整的功能。 想要实现表格内的文字在宽度不足时不会被显示出来,网上有人说在TD里面加DIV,谬也。

可以调整列宽的表格

关键字: javascript table
今天用JavaScript实现了对表格列宽进行调整的功能。

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

Java代码 复制代码
  1. table-layout:fixed;  
table-layout:fixed;


TD的CSS需要有:

Java代码 复制代码
  1. overflow:hidden;   
  2. text-overflow:ellipsis;   
  3. white-space:nowrap;  
	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才行,代码如下:

Java代码 复制代码
  1. var resize=document.createElement("DIV");   
  2. resize.style.width=6;   
  3. resize.style.height=10;   
  4. resize.style.backgroundColor="#F00";   
  5. if(!IE)   
  6. {   
  7.     resize.style.marginRight="none";   
  8.     resize.style.marginLeft="auto";   
  9. }   
  10. resize.onmousedown=_md;   
  11. resize.style.cursor="col-resize";   
  12. this.ths[i].style.textAlign="right";   
  13. this.ths[i].appendChild(resize);  
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下通过测试。


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章