<!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. 洛谷P2678跳石头题解

    题目 这个题也是一个很经典的题了.其主要思想也是二分答案,原因就是题目中只要出现最大值最小或最小值最大,这种描述十有八九就是二分答案. 这个题原题也是让我们求最短的跳跃距离的最大值. 显而易见,最大值 ...

  2. bzoj 1015: [JSOI2008]星球大战starwar (逆向思维+并查集)

    链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1015 思路: 题目是要我们对当前图拆掉k个点,问,每拆一个点后图中有多少个联通块,我们可以逆 ...

  3. FWT模板（洛谷P4717 【模板】快速沃尔什变换）（FWT）

    洛谷题目传送门 只是一个经过了蛇皮压行的模板... 总结?%%%yyb%%% #include<bits/stdc++.h> #define LL long long #define RG ...

  4. Hdoj 2050.折线分割平面 题解

    Problem Description 我们看到过很多直线分割平面的题目,今天的这个题目稍微有些变化,我们要求的是n条折线分割平面的最大数目.比如,一条折线可以将平面分成两部分,两条折线最多可以将平面 ...

  5. 从Java的角度简单修复Cookie越权漏洞

    技术实在是有限,讲解cookie越权的时候可能有点简单和粗糙.这里就简单记录学习下. 首先自己写一段存在漏洞的代码code: sendCookie.java package cookie; impor ...

  6. js jquery数组去重

    数组去重建议直接使用jquery的 $.unique(arr);方法,此外比较好的方法是本文中的unique3方法比较快用了一个hash表,就是所谓的空间换时间.本文还提供了很多其他写法,都是大同小异 ...

  7. Git中撤销提交

    Git的几种状态 未修改 原始内容 已修改 ↓ 工 作 区 已暂存 ↓ git add 暂 存 区 已提交 ↓ git commit 本地仓库 已推送 ↓ git push 远程仓库 注意:下面所有命 ...

  8. QTREE5 - Query on a tree V——LCT

    QTREE5 - Query on a tree V 动态点分治和动态边分治用Qtree4的做法即可. LCT: 换根后,求子树最浅的白点深度. 但是也可以不换根.类似平常换根的往上g,往下f的拼凑 ...

  9. 内部git常用总结

    上库git常用命令总结   http://3ms.huawei.com/hi/group/1531/wiki_4955279.html?for_statistic_from=all_group_wik ...

  10. 跟我一起学习vue2（熟悉vue.js）[一]

    由于有angularjs的基础,所以我第一步是在官网:https://cn.vuejs.org/ 上面看了三遍他的理论知识,还有实例. 现在做完了第二步,就是在菜鸟教程:http://www.runo ...