<!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. java json转换（一）

    主要使用了2个类 JsonConvert.class 和 ConvertHelper.class 由于常规转json.只要model牵涉到复杂的关联实体对象.那么就会出现 深度循环的错误. 因此这里通 ...

  2. 前端 -- CSS基础

    一,CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). 二,CSS语法 1 ...

  3. 【AGC002E】Candy Piles 博弈论

    题目大意 有\(n\)堆糖果,第\(i\)堆有\(a_i\)个. 两个人轮流决策,决策分为两种: 1.选择糖果数最多的一堆糖果,并把这堆糖全吃了. 2.在每堆非空的糖果堆里拿一颗糖吃掉. 吃掉最后一颗 ...

  4. 爬虫_电影天堂 热映电影（xpath）

    写了一天才写了不到100行.不过总归是按自己的思路完成了 import requests from lxml import etree import time BASE = 'http://www.d ...

  5. 用keras实现基本的回归问题

    数据集介绍 共有506个样本,拆分为404个训练样本和102个测试样本 该数据集包含 13 个不同的特征: 人均犯罪率. 占地面积超过 25000 平方英尺的住宅用地所占的比例. 非零售商业用地所占的 ...

  6. VCC、VDD和VSS

    在电子电路中,常可以看到VCC.VDD和VSS三种不同的符号,它们有什么区别呢? 一.解释 VCC:C=circuit 表示电路的意思, 即接入电路的电压:  VDD:D=device 表示器件的意思 ...

  7. HDU5985 Lucky Coins 概率dp

    题意:给你N种硬币,每种硬币有Si个,有Pi 概率朝上,每次抛所有硬币抛起,所有反面的拿掉,问每种硬币成为最后的lucky硬币的概率. 题解:都知道是概率dp,但是模拟赛时思路非常模糊,很纠结,dp[ ...

  8. vue学习笔记（二）- 数据绑定、列表渲染、条件判断

    vue的数据绑定和列表渲染的造轮子 GitHub:八至 作者:狐狸家的鱼 双向数据绑定 Vue中数据的双向绑定-v-model 数据->页面 页面->数据 适用:input.select. ...

  9. A1018. Public Bike Management

    There is a public bike service in Hangzhou City which provides great convenience to the tourists fro ...

  10. 【洛谷P4878】布局

    题目大意:给定一个长度为 N 的递增序列,有 M 组差分约束关系,求满足这些约束关系时,第一个数和第 N 个数的差是多少. 题解:首先,能否满足约束关系需要判断一下负环,若满足约束关系,再从第一个点 ...