首页
业界资讯
软件教程
软件下载
硬件频道
家电频道
开发编程
源码下载
游戏频道
手机软件
智能设备
ＩＴ资讯
互联网
ＩＴ业界
通信·手机
网站推荐
互联思考
深度报道
电子商务
职场创业
资料数据
常用软件
操作系统
聊天软件
病毒安全
办公软件
硬件数码
手机使用
笔记本
装机配件
数码相机
精品下载
APP下载
冲浪宝典
APP教程
开发编程
网页制作
通过鼠标拖拽改变表格列宽
2010-08-28 10:50:18
来源：西部e网
作者：
以下代码加入< head >区域
<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> //more javascript from http://www.smallrain.net 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>
以下代码加入< body >区域
<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>小雨</td><td>信息中心</td><td>北京市海淀区</td> </tr> </table>
关键词：
html
相关阅读:
HTML特殊字符大全（unicode字符集）
HTML中      等6种空白空格...
前端编码规范（2）—— HTML 规范
强制不使用“兼容性视图”的HTML代码
判断IE版本的HTML语句详解，如：[if lte IE 9...
输入框点击内容清空或显示的js代码
Web开发者不可不知的15条编码原则
HTML.Next会给我们带来什么？
HTML vs XHTML vs DHTML
HTML特殊字符大全
推荐文章
2013年网页设计最热门的20个趋势
强制不使用“兼容性视图”的HTML代码
让网站变灰的css代码（支持IE、Firefox和Chrome）
HTML5 & CSS3的新交互特性
HTML5 vs Mobile App 谁将是主流
2010年最佳jQuery插件
使用HTML5开发离线应用 - cache manifest
godaddy的Windows主机设置301重定向的方法
CSS兼容IE6、IE7、IE8和Firefox浏览器的方法
提高编写CSS代码效率的10个习惯
最新文章
DIV多行文本内容垂直居中的几种方法
EDM电子邮件CSS和HTML编码规范
解决div用margin:auto水平居中遇到滚动条跳动
让iPad的Safari页面div显示滚动条的方法
IE10、IE11和Microsoft Edge的Hack
HTML特殊字符大全（unicode字符集）
CSS清除浮动的5种方法
微信公众号弹幕的HTML5和SVG代码
CSS设置table下tbody滚动条与thead对齐的方法
HTML和CSS颜色名与十六进制颜色对照表
HTML中      等6种空白空
CSS3和jQuery隔行变色的两种方法
营销QQ在线客服代码生成的方法（支持手机和P
360浏览器和搜狗浏览器不支持button的submit
H5移动端页面设计心得分享（附案例解析）
企业网站图片SEO优化重点之处
子DIV设置margin-top影响父DIV位置的解决办法
Web开发者不可不知的15条编码原则
网站简介
|
版权声明
|
联系我们
|
在线投稿
|
友情链接
|
广告服务
|
RSS订阅
|
网站地图
|
Copyright © 2000-2018 威易网
WWW.
WESTE
.NET
. All rights reserved.
陕ICP备19016059号
