<!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. 查询SQL磁盘活动量信息

    /* 用来显示有关由 Transact-SQL 语句生成的磁盘活动量的信息.*/DBCC DROPCLEANBUFFERS --清空缓存set statistics io on --开启set sta ...

  2. 「POJ3311」Hie with the Pie

    题目链接 >http://poj.org/problem?id=3311< 题意:从0出发,经过所有点(点可以重复走)后回到0点,问最短路 思路分析: 这题和普通的最短路不太一样,因为题目 ...

  3. MT【305】丹德林双球

    如图.在正方体$ABCD-A_1B_1C_1D_1$中,点$M,N$分别是直线$CD,AB$上的动点,点$P$是$\Delta A_1C_1D_1$内的动点(不包括边界),记直线$DP$与$MN$所成 ...

  4. HihoCoder 1511: 树的方差(prufer序)

    题意 对于一棵 \(n\) 个点的带标号无根树,设 \(d[i]\) 为点 \(i\) 的度数,定义一棵树的方差为数组 \(d[1..n]\) 的方差. 给定 \(n\) ,求所有带标号的 \(n\) ...

  5. 【HDU3032】Nim or not Nim?（博弈论）

    [HDU3032]Nim or not Nim?(博弈论) 题面 HDU 题解 \(Multi-SG\)模板题 #include<iostream> #include<cstdio& ...

  6. Libre OJ 144、145 （DFS序）

    部分参考自博客:https://blog.csdn.net/hpu2022/article/details/81910490 在许多问题中,由于树结构复杂通常会导致问题很棘手,因为其实非线性结构,操作 ...

  7. A1131. Subway Map (30)

    In the big cities, the subway systems always look so complex to the visitors. To give you some sense ...

  8. 【洛谷P4145】花神游历各国

    题目大意:给定一个长度为 N 的序列,支持区间开根,区间求和. 题解:对于区间开根操作,可以发现任何一个位置的值开根至多 6 次就会变成 1.因此即使是整个区间开根,暴力修改6次后,所有的点的权值均小 ...

  9. Java 数组+循环升级篇

    数组是一个变量,存储相同数据类型的一组数据(就是能存储很多数值的数据类型) 如果说声明一个变量就是在内存空间划出一块合适的空间,那么声明一个数组就是在内存空间划出一串连续的空间. 数组的基本要求 标识 ...

  10. pytest 7 assert断言

    前言:断言是自动化最终的目的,一个用例没有断言,就失去了自动化测试的意义了. 断言用到的是 assert关键字.之前的介绍,有的测试方法中其实用到了assert断言.简单的来说,就是预期的结果去和实际 ...