<!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. [ZJOI2009]函数 题解

    题目链接:[ZJOI2009]函数 对于$n=1$的情况,直接输出$1$ 对于$n>1$的情况,由于我们可以将图上下反转,所以第$k$层的情况可以被转成第$n-k+1$层 规律自己打个表可以推出 ...

  2. 【XSY1596】旅行 期望DP

    题目大意 有\(m\)个游客, 他们都依次访问城市\(1,2,3,\ldots,n\), 第\(i\)个游客到达任意一个城市后有\(p_i\)的概率会停下, 不再继续前行 设\(c_i\)个乘客经过了 ...

  3. Android如何在一个TextView中实现多种文本风格？

     本文选自StackOverflow(简称:SOF)精选问答汇总系列文章之一,本系列文章将为读者分享国外最优质的精彩问与答,供读者学习和了解国外最新技术,本文为大家讲解Android中,如何在一个 ...

  4. 【APIO2018】新家（线段树）

    [APIO2018]新家(线段树) 题面 UOJ 洛谷 BZOJ 题解 论比赛时想不到二分的危害,就只能Cu滚粗 既然不要在线,那么考虑离线做法. 既然时间是区间,那么显然按照时间顺序处理答案. 显然 ...

  5. pycharm安装TensorFlow

    一.首先说下我在安装TensorFlow的过程中遇到的坑: 1.python的版本是3.5的版本,因为TensorFlow好像只支持到3.5现在.然后python需要安装64位的安装包,如果安装的是3 ...

  6. pagehelper 使用

    MySQL对分页的支持 简单来说MySQL对分页的支持是通过limit子句.请看下面的例子. limit关键字的用法是 LIMIT [offset,] rows offset是相对于首行的偏移量(首行 ...

  7. 纪中2018暑假培训day1提高b组改题记录

    收到意见,认为每天的程序和随笔放在一起写的博客太长了,于是分开整理 day1 模拟赛,看了看提高a组t1的样例就不太想写,于是转而写b组 t1: Description 给定一个n个点m条边的有向图, ...

  8. tyvj/joyoi 1336 火车进栈

    比原题水了很多(因为原题要高精度) 输出字典序前20种出栈序列. 其实是贪心题:我们每次确定一个出栈的数. 当栈里有数时,字典序显然比从后面拿数要小,所以先搜这个. 之后依次搜后面队列里的数,因为字典 ...

  9. tyvj/joyoi 1043 表达式计算4

    这题怎么这么毒瘤... 一开始我想转后缀表达式来计算,后来发现有负数...弃疗. 递归求解又发现会有多余括号,我觉得不行... 实在是毒瘤啊! #include <cstdio> #inc ...

  10. 【CH6801】棋盘覆盖

    题目大意:给定一个 N*N 的棋盘,棋盘上有些位置不能防止任何东西,现用 1*2 的骨牌填充棋盘,问最多能铺多少块骨牌. 题解:由于骨牌只能覆盖相邻的两个格子,那么按照对角线进行划分的格子可以保证一定 ...