<!DOCTYPE HTML>

<html>

<head>

    <meta charset="gbk">

    <title>table</title>

    <style>

        .ztable {

            table-layout: fixed;

            font-size: 12px;

            font-family: 微软雅黑;

            border-right: 1px solid #D4D4D4;

            border-bottom: 1px solid #D4D4D4;

        }

            .ztable th {

                background-color: #F0F0F0;

                height: 20px;

                text-overflow: ellipsis;

                white-space: nowrap;

                overflow: hidden;

                border-left: 1px solid #D4D4D4;

                border-top: 1px solid #D4D4D4;

            }

            .ztable td {

                border-left: 1px solid #D4D4D4;

                border-top: 1px solid #D4D4D4;

                height: 20px;

                text-overflow: ellipsis;

                white-space: nowrap;

                overflow: hidden;

            }

    </style>

</head>

<body>

    <table id="tb_1" cellspacing="0" cellpadding="0" width="600" class="ztable">

        <tbody>

            <tr align="center">

                <th style="width: 100px;">用户编号</th>

                <th style="width: 100px;">试用时间</th>

                <th style="width: 100px;">转正时间</th>

                <th style="width: 100px;">性别</th>

                <th>姓名拼音</th>

                <th>生日时间</th>

                <th>民族</th>

                <th>身高</th>

            </tr>

            <tr>

                <td>2000001</td>

                <td>1997-3-13</td>

                <td>1997-3-13</td>

                <td>1</td>

                <td>WZJ</td>

                <td>1965-3-13</td>

                <td>汉</td>

                <td>171</td>

            </tr>

            <tr>

                <td>2000045</td>

                <td>2001-2-15</td>

                <td>2001-3-15</td>

                <td>0</td>

                <td>WY</td>

                <td>1978-8-5</td>

                <td>汉</td>

                <td>162</td>

            </tr>

            <tr>

                <td>2000046</td>

                <td>2001-2-23</td>

                <td>2001-3-23</td>

                <td>0</td>

                <td>LQ</td>

                <td>2001-2-23</td>

                <td>汉</td>

                <td>171</td>

            </tr>

        </tbody>

    </table>

    <script type="text/javascript">

        var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题

        var table = document.getElementById("tb_1");

        for (j = 0; j < table.rows[0].cells.length; j++) {

            table.rows[0].cells[j].onmousedown = function () {

                //记录单元格

                tTD = this;

                if (event.offsetX > tTD.offsetWidth - 10) {

                    tTD.mouseDown = true;

                    tTD.oldX = event.x;

                    tTD.oldWidth = tTD.offsetWidth;

                }

                //记录Table宽度

                //table = tTD; while (table.tagName != ‘TABLE') table = table.parentElement;

                //tTD.tableWidth = table.offsetWidth;

            };

            table.rows[0].cells[j].onmouseup = function () {

                //结束宽度调整

                if (tTD == undefined) tTD = this;

                tTD.mouseDown = false;

                tTD.style.cursor = 'default';

            };

            table.rows[0].cells[j].onmousemove = function () {

                //更改鼠标样式

                if (event.offsetX > this.offsetWidth - 10)

                    this.style.cursor = 'col-resize';

                else

                    this.style.cursor = 'default';

                //取出暂存的Table Cell

                if (tTD == undefined) tTD = this;

                //调整宽度

                if (tTD.mouseDown != null && tTD.mouseDown == true) {

                    tTD.style.cursor = 'default';

                    if (tTD.oldWidth + (event.x - tTD.oldX) > 0)

                        tTD.width = tTD.oldWidth + (event.x - tTD.oldX);

                    //调整列宽

                    tTD.style.width = tTD.width;

                    tTD.style.cursor = 'col-resize';

                    //调整该列中的每个Cell

                    table = tTD; while (table.tagName != 'TABLE') table = table.parentElement;

                    for (j = 0; j < table.rows.length; j++) {

                        table.rows[j].cells[tTD.cellIndex].width = tTD.width;

                    }

                    //调整整个表

                    //table.width = tTD.tableWidth + (tTD.offsetWidth – tTD.oldWidth);

                    //table.style.width = table.width;

                }

            };

        }

    </script>

</body>

</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. Codeforces519 E. A and B and Lecture Rooms

    传送门:>Here< 题意:询问给出一棵无根树上任意两点$a,b$,求关于所有点$i$,$dist(a,i) = dist(b,i)$的点的数量.要求每一次询问在$O(log n)$的时间 ...

  2. Linux qemu-nbd mount qemu disk image

    Linux qemu-nbd mount qemu disk image deepin@deepin:~$ deepin@deepin:~$ qemu-nbd --help Usage: qemu-n ...

  3. 【POJ1083】 Moving Tables （并行的搬运）

    BUPT2017 wintertraining(15) #6E 题意 房间1和2,3和4,...,399和400共用一节走廊,有q次从房间li到ri的搬运桌子,一次搬运10分钟.两个搬运如果走廊有重叠 ...

  4. 【 HDU 1538 】A Puzzle for Pirates （海盗博弈论）

    BUPT2017 wintertraining(15) #5D HDU 1538 偷懒直接放个果壳的链接了,感觉比网上直接找这题的题解要更正确.易懂. 海盗博弈论 代码 #include <cs ...

  5. 【BZOJ4890】[TJOI2017]城市（动态规划）

    [BZOJ4890][TJOI2017]城市(动态规划) 题面 BZOJ 洛谷 题解 数据范围都这样了,显然可以暴力枚举断开哪条边. 然后求出两侧直径,暴力在直径上面找到一个点,使得其距离直径两端点的 ...

  6. Codeforces | CF1029F 【Multicolored Markers】

    这道题其实难度应该小于紫题...除了一点小特判以外没什么难度...\(\leq50\)行代码即可\(AC\)此题 题目大意:给定两个数\(a,b(1\leq a,b\leq 10^{14})\)分别表 ...

  7. SNMP扫描

    ------------------------------------------------------------------grub引导密码:[root@localhost ~]# jm4pt ...

  8. GuGuFishtion HDU - 6390 （杭电多校7E）

    啊啊啊啊...全在纸上 字丑...算了算了 然后除法部分都用逆元就好了 还有逆元打表....学到了...牛逼 #include<map> #include<set> #incl ...

  9. java 连接数组

    一,使用Apache Commons的ArrayUtils Apache Commons类库有很多,几乎大多数的开源框架都依赖于它,Commons中的工具会节省你大部分时间,它包含一些常用的静态方法和 ...

  10. MariaDB安装及基本配置

    MariaDB安装及基本配置(CentOS6.9) 数据库基础概念 数据库(Database, DB)是按照数据结构来组织.存储和管理数据的建立在计算机存储设备上的仓库. DBMS: Database ...