1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="gbk">
  5.     <title>table</title>
  6.     <style>
  7.         .ztable {
  8.             table-layout: fixed;
  9.             font-size: 12px;
  10.             font-family: 微软雅黑;
  11.             border-right: 1px solid #D4D4D4;
  12.             border-bottom: 1px solid #D4D4D4;
  13.         }
  14.  
  15.             .ztable th {
  16.                 background-color: #F0F0F0;
  17.                 height: 20px;
  18.                 text-overflow: ellipsis;
  19.                 white-space: nowrap;
  20.                 overflow: hidden;
  21.                 border-left: 1px solid #D4D4D4;
  22.                 border-top: 1px solid #D4D4D4;
  23.             }
  24.  
  25.             .ztable td {
  26.                 border-left: 1px solid #D4D4D4;
  27.                 border-top: 1px solid #D4D4D4;
  28.                 height: 20px;
  29.                 text-overflow: ellipsis;
  30.                 white-space: nowrap;
  31.                 overflow: hidden;
  32.             }
  33.     </style>
  34. </head>
  35. <body>
  36.     <table id="tb_1" cellspacing="0" cellpadding="0" width="600" class="ztable">
  37.         <tbody>
  38.             <tr align="center">
  39.                 <th style="width: 100px;">用户编号</th>
  40.                 <th style="width: 100px;">试用时间</th>
  41.                 <th style="width: 100px;">转正时间</th>
  42.                 <th style="width: 100px;">性别</th>
  43.                 <th>姓名拼音</th>
  44.                 <th>生日时间</th>
  45.                 <th>民族</th>
  46.                 <th>身高</th>
  47.             </tr>
  48.             <tr>
  49.                 <td>2000001</td>
  50.                 <td>1997-3-13</td>
  51.                 <td>1997-3-13</td>
  52.                 <td>1</td>
  53.                 <td>WZJ</td>
  54.                 <td>1965-3-13</td>
  55.                 <td>汉</td>
  56.                 <td>171</td>
  57.             </tr>
  58.             <tr>
  59.                 <td>2000045</td>
  60.                 <td>2001-2-15</td>
  61.                 <td>2001-3-15</td>
  62.                 <td>0</td>
  63.                 <td>WY</td>
  64.                 <td>1978-8-5</td>
  65.                 <td>汉</td>
  66.                 <td>162</td>
  67.             </tr>
  68.             <tr>
  69.                 <td>2000046</td>
  70.                 <td>2001-2-23</td>
  71.                 <td>2001-3-23</td>
  72.                 <td>0</td>
  73.                 <td>LQ</td>
  74.                 <td>2001-2-23</td>
  75.                 <td>汉</td>
  76.                 <td>171</td>
  77.             </tr>
  78.         </tbody>
  79.     </table>
  80.     <script type="text/javascript">
  81.         var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
  82.         var table = document.getElementById("tb_1");
  83.         for (j = 0; j < table.rows[0].cells.length; j++) {
  84.             table.rows[0].cells[j].onmousedown = function () {
  85.                 //记录单元格
  86.                 tTD = this;
  87.                 if (event.offsetX > tTD.offsetWidth - 10) {
  88.                     tTD.mouseDown = true;
  89.                     tTD.oldX = event.x;
  90.                     tTD.oldWidth = tTD.offsetWidth;
  91.                 }
  92.                 //记录Table宽度
  93.                 //table = tTD; while (table.tagName != ‘TABLE') table = table.parentElement;
  94.                 //tTD.tableWidth = table.offsetWidth;
  95.             };
  96.             table.rows[0].cells[j].onmouseup = function () {
  97.                 //结束宽度调整
  98.                 if (tTD == undefined) tTD = this;
  99.                 tTD.mouseDown = false;
  100.                 tTD.style.cursor = 'default';
  101.             };
  102.             table.rows[0].cells[j].onmousemove = function () {
  103.                 //更改鼠标样式
  104.                 if (event.offsetX > this.offsetWidth - 10)
  105.                     this.style.cursor = 'col-resize';
  106.                 else
  107.                     this.style.cursor = 'default';
  108.                 //取出暂存的Table Cell
  109.                 if (tTD == undefined) tTD = this;
  110.                 //调整宽度
  111.                 if (tTD.mouseDown != null && tTD.mouseDown == true) {
  112.                     tTD.style.cursor = 'default';
  113.                     if (tTD.oldWidth + (event.x - tTD.oldX) > 0)
  114.                         tTD.width = tTD.oldWidth + (event.x - tTD.oldX);
  115.                     //调整列宽
  116.                     tTD.style.width = tTD.width;
  117.                     tTD.style.cursor = 'col-resize';
  118.                     //调整该列中的每个Cell
  119.                     table = tTD; while (table.tagName != 'TABLE') table = table.parentElement;
  120.                     for (j = 0; j < table.rows.length; j++) {
  121.                         table.rows[j].cells[tTD.cellIndex].width = tTD.width;
  122.                     }
  123.                     //调整整个表
  124.                     //table.width = tTD.tableWidth + (tTD.offsetWidth – tTD.oldWidth);
  125.                     //table.style.width = table.width;
  126.                 }
  127.             };
  128.         }
  129.     </script>
  130. </body>
  131. </html>

js实现table用鼠标改变td的宽度，固定table宽度和高度超过显示点的更多相关文章

  1. c# asp.net 鼠标改变控件坐标位置,更改控件坐标,注册表保存读取,打印,查找局域网内打印机等等收集

    界面虽然被我弄的很难看,但功能还可以 里边注册表的路径自己设置一下,或者加一个创建注册表的语句,不然会报错 前台: <%@ Page Language="C#" AutoEv ...

  2. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  3. 固定Table的头部和左边的列-在Knockout Js使用场景下

    要求:固定Table的头部和左边的列 场景:Knockout Js被用于绑定Table的数据源. 固定HTML表格的头部和列是一个很常见的需求.此文:http://www.cnblogs.com/so ...

  4. HTML 表格<table><caption><th><tr><td><thead><tbody><tfoot><col><colgroup>

    <table>标签: 定义和用法: <table>标签定义HTML表格. 简单的HTML表格由table元素以及一个或多个tr.th或td元素组成. tr元素定义表格行,th元 ...

  5. layui table动态表头 改变表格头部 重新加载表格

    改变头部原理: 删除原来表格, 重新建立DOM元素, 重新加载table,实现表头改变 明白了原理, 我相信大家都能写出来了, table.reload(ID, options)目前好像还不支持con ...

  6. Jquery改变td内容为1的颜色

    Jquery改变td内容为1的颜色<table id="tb" > <tr> <td val="1">1</td> ...

  7. js课程 5-13 js事件绑定和鼠标事件注意事项有哪些

    js课程 5-13  js事件绑定和鼠标事件注意事项有哪些 一.总结 一句话总结:js代码的灵魂就是改变标签的属性和样式,就这两种. 1.js触发改的东西是哪两样? 属性和样式 2.js如何让页面用标 ...

  8. js获取table checkbox选中行的值.mdjs获取table checkbox选中行的

    <!DOCTYPE html> <html> <head> <script src="https://cdn.staticfile.org/jque ...

  9. table表格宽度固定，同时td内容过长也不会被撑开

    table表格宽度固定,同时td内容过长也不会被撑开,设置如下css: table{table-layout:fixed;word-break:break-all;}

随机推荐

  1. flask之三方组件

    Flask-session Flask-session跟框架自带的session有什么区别呢 框架自带的session是通过请求上下文~放入到Local中的~那如果我们想把session放入别的地方怎 ...

  2. HBase读取与写入流程

    写入流程 读取流程 https://yq.aliyun.com/articles/670748?spm=a2c4e.11153940.blogcont684011.28.427e4648CTtaPL

  3. MT【169】拉格朗日配方

    已知$x^2+y^2+z^2=1$求$3xy-3yz+2z^2$的最大值______ 答案:$3$ 提示:$3(x^2+y^2+z^2)-(3xy-3yz+2z^2)=3\left(y+\dfrac{ ...

  4. JumpServer 跳板机系统

    Jumpserver项目为开源项目,截至到目前最新版本为4.0,4.0功能并不完整,无上传.下载功能,配置复杂.启动服务也较繁琐,推荐使用0.3.2版本,文档较全,安装简单文档链接https://gi ...

  5. 【CF446C】DZY Loves Fibonacci Numbers （线段树 + 斐波那契数列）

    Description ​ 看题戳我 给你一个序列,要求支持区间加斐波那契数列和区间求和.\(~n \leq 3 \times 10 ^ 5, ~fib_1 = fib_2 = 1~\). Solut ...

  6. Dynamic CRM 2015学习笔记（2）更改系统显示语言

    默认装的是英文的系统,想换成中文的.下面列出操作步骤: 1. 下载并安装语言包 http://www.microsoft.com/en-US/download/details.aspx?id=4501 ...

  7. Uva796 Critical Links

    用tarjan缩点 然后用dfn[u] < low[v]缩点并且保存起来 在sort一遍输出 #include<stdio.h> #include<string.h> # ...

  8. 【nginx】nginx配置文件结构，内置变量及参数调优

    Nginx的配置文件是一个纯文本文件,它一般位于Nginx安装目录的conf目录下,整个配置文件是以block的形式组织的.每个block一般以一个大括号“{”来表示.block 可以分为几个层次,整 ...

  9. [SDOI2011]计算器（BSGS）

    洛古题面 对于操作一,用快速幂算即可 代码如下 int quickpow(int a,int b,int k) { int r=1; while(b) { if(b&1) r=(r*a)%k; ...

  10. 关于servlet连接数据库会出现空指针异常情况

    一.servlet在连接数据库时,如果没有事先配置,当用Tomcat运行时会出现NullPointer的情况,是因为Tomcat在运行你的应用程序时没有连接mysql的jar包, 正确做法是将你的my ...