表格自由拉伸修改版

最新推荐文章于 2021-05-26 09:26:15 发布
最新推荐文章于 2021-05-26 09:26:15 发布
阅读量537 收藏 1
点赞数 2
CC 4.0 BY-SA版权
分类专栏： JavaScript 文章标签： 前端 JavaScript table 自由分配表格宽度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/gujian_peachblossom/article/details/92611105
该博客主要介绍使用JavaScript实现表格的相关功能，包括自由拉伸表格，在缩放当前列时保证其他列宽度不变且表格x轴超出可滑动，同时在拉伸过程中控制文字的显示与溢出省略。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

主要实现一下几点

1.自由拉伸表格

2.缩放当前列其他列宽度不变，表格x轴超出滑动

3.拉伸的同时控制文字的显示与溢出省略

​
<!DOCTYPE html>

<html lang="en">



<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

.box {

width: 100%;

height: 100%;

}



table {

width: 100%;

height: 300px;



}



tr {}



tr:nth-of-type(odd) {

background-color: #fff;

}



tr:nth-of-type(even) {

background-color: #EDF6FA;

}



th {



height: 40px;

background-color: #fff;

text-align: center;

padding: 0;

line-height: 40px;

color: #708BB3;

font-size: 14px;

border-right: 2px solid #E6EDEB;

vertical-align: middle;

}



th:last-child {

width: 159px;

border-right: none;

}



td {



height: 40px;

line-height: 40px;

text-align: center;

color: #5C7191;

font-size: 12px;

border-right: 2px solid #E6EDEB;

padding: 0;

vertical-align: middle;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}



td:nth-child(1) {

width: 87px !important;

}



td:last-child {

width: 159px !important;

cursor: pointer;

border-right: none;

}



.tableDetail:hover {

text-decoration: none;

}



.tableDetail:before {

content: "";

display: inline-block;

vertical-align: middle;

width: 13px;

height: 15px;

margin-right: 4px;

background: url(../../img/customer/eye.png) no-repeat;

background-size: 100%;

}



.tableDetail {

display: block;

margin: auto;

width: 60px;

height: 26px;

background: rgba(72, 158, 255, 1);

border: 1px solid rgba(69, 151, 245, 1);

box-shadow: 0px 1px 2px 0px rgba(120, 135, 142, 0.2);

border-radius: 2px;

color: #fff !important;

font-size: 12px;

text-align: center;

line-height: 24px;

cursor: pointer;

}

</style>

</head>



<body>

<div class="box">

<table cellspacing="0" cellpadding="0" border="1">

<tr>

<th>語文</th>

<th>数学</th>

<th>英语</th>

<th>历史</th>

<th>地理</th>

<th>化学</th>

<th>生物</th>

<th>物理</th>

<th>政治</th>

<th>疯子</th>

</tr>

<tr>

<td title="111111111111111111111111111">1111111111111111111111111111111111111111</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

</tr>

<tr>

<td title="111111111111111111111111111">1111111111111111111111111111111111111111</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

</tr>

<tr>

<td title="111111111111111111111111111">1111111111111111111111111111111111111111</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

</tr>

<tr>

<td title="111111111111111111111111111">1111111111111111111111111111111111111111</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

</tr>

<tr>

<td title="111111111111111111111111111">1111111111111111111111111111111111111111</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

</tr>

</table>

</div>

<script src="assets/jquery-3.1.1.js"></script>

<script>

let table =document.getElementsByTagName("table")[0];

        let rows = table.rows[0];

        let flag = false;

        var that;

        // 遍历

        document.onselectstart = new Function("return false");

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

            $(rows.cells[j]).unbind("mousemove");

            $(rows.cells[j]).mousemove(function (e) {

                if (this.offsetWidth - 20 <= e.offsetX && e.offsetX <= this.offsetWidth) {

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

                    // $(this).bind("mousedown");

                } else {

                    // flag = false;

                    this.style.cursor = "default";

                }

                if (that == undefined) {

                    that = this;

                }

                if (flag) {

                    that.style.cursor = 'default';

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

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

                    }

                    //调整列宽

                    that.style.width = that.width;

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

                    //调整该列中的每个Cell

                    table = that;

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

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

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

                    }

                    // 表格中的文字随着表格的伸缩而显示隐藏

                    var tdWidth = that.width;

                    var tdIndex = that.cellIndex;

                    for (let v of table.rows) {

                        var tdTitle = v.cells[tdIndex].title;

                        if (tdTitle) {

                            $(v.cells[tdIndex]).html("<div style='width:" + tdWidth + "px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;'>" + tdTitle + "</div>");

                        }

                    }

                    //调整整个表

                    // table.width = that.tableWidth + (that.offsetWidth - that.oldWidth);

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

                }

            })

            $(rows.cells[j]).unbind("mousedown");

            $(rows.cells[j]).mousedown(function () {

                that = this;

                flag = true;

                // if (event.offsetX > that.offsetWidth - 10) {

                    that.oldX = event.x;

                    that.oldWidth = that.offsetWidth;

                    $(that).bind("mousemove");

                // }

                //记录Table宽度

                // table = that;

                // while (table.tagName != 'TABLE') {

                // table = table.parentElement

                // };

                // that.tableWidth = table.offsetWidth;

            })

            $(rows.cells[j]).unbind("mouseup");

            $(rows.cells[j]).mouseup(function () {

                if (that == undefined) {

                    that = this;

                }

                flag = false;

            })

            // 非表头的地方点击更改flag值

            $(rows).siblings().unbind("mouseup");

            $(rows).siblings().mouseup(function(){

                flag = false;

            })

        }

</script>

</body>

</html>

​

 

HarmonyOS从基础到实战-高性能华为在线答题元服务
一键难忘的博客
11-21 15万+
HarmonyOS从基础到实战-高性能华为在线答题元服务 在本文中，我们介绍了一个关于在线答题应用的项目，其中包括项目结构和开发计划。项目主要分为主应用的Ability（entryability）、卡片的Ability（Entnyformability）、从云数据库导出的数据类型（Models）以及页面代码文件夹（Pages）等模块。使用了两个重要的配置文件，分别是agconnect-services.json和schema.json，用于连接serverless服务和云端配置信息。
数学在引力波宇宙学中的关键作用
AI天才研究院
01-21 1658
引言 背景介绍 引力波宇宙学的兴起可以追溯到20世纪初期，爱因斯坦的广义相对论预言了引力波的存在。然而，直到2015年，人类才首次通过LIGO（激光干涉引力波观测站）直接探测到了引力波，这一重大发现为宇宙学的研究开辟了新的窗口。引力波是由高速移动的质量物体（如黑洞和恒星）产生的扰动，它们
html种table_td 列宽左右可拉伸_搜索条件可展开隐藏demo.rar
12-31
html种table_td 列宽左右可拉伸_搜索条件可展开隐藏demo,一个项目使用的，拿出来分享，代码比较简洁，代码量少。绝对可用，宽度可自适应。用到实际项目上还需要自行调整。
js 实现table每列可左右拖动改变列宽度
热门推荐
zanychou的专栏
07-21 3万+
table 用户编号 试用时间转正时间性别姓名拼音 生日时间民族身高 2000001 1997-3-131997-3-131WZJ 1965-3-13汉171 2000045 2001-2-152001-3-150WY 1978-8-5汉162 2000046 2001-2-232001-3-230LQ 2001-2-23汉171
JavaScript表格头部拉伸
KevinMiGuan的博客
05-09 380
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #carTable{width:100%;} td{text-align:center;} </style> </head> <body> <table id="carTabl.
从word里导出html后，对html文件的处理--拉长表格（宽度）
注重长远 天天积累 cqujsjcyj
10-08 956
从word里导出html后，对html文件的处理--拉长表格（宽度） 1. word 菜单 文件==> 另存为网页; 2. 用DreamWeaver打开该html文件，进行编辑； 3. 编辑时，给表格加宽度（width=1000）等，即可； ...
JS实现可拉伸表格
zhangjinpeng66的专栏
08-27 2158
// // Resizable Table Columns. //  version: 1.0 // // (c) 2006, bz // // 25.12.2006:  first working prototype // 26.12.2006:  now works in IE as well but not in Opera (Opera is @#$%!) // 27.12
【详细教程】APDL语言在杆拉伸有限元建模中的应用：一步步教你成为专家
[杆拉伸有限元计算程序_busyou4_杆拉伸；有限元；apdl语言_](http://miguelpena.site/wp-content/uploads/2023/01/como-hacer-un-analisis-por-elementos-finitos.webp) # 摘要 本文全面介绍APDL语言的基础知识、...
掌握CATIA：提升产品设计的自由曲面造型技术
本文系统地介绍了CATIA在产品设计中的应用，特别是在自由曲面造型方面的理论与实践技巧。首先概述了CATIA产品设计的基本概念，然后深入探讨了自由曲面造型的基础理论，包括曲面分类、数学基础以及在CATIA中的具体...
【AUTOCAD 3D建模技巧】：文字与表格整合，打造专业级3D建筑模型！
[【AUTOCAD 3D建模技巧】：文字与表格整合，打造专业级3D建筑模型！](https://help.autodesk.com/sfdcarticles/img/0EM3g000000dryk) # 1. AUTOCAD 3D建模基础概念 ## 1.1 3D建模的重要性 随着计算机辅助设计（CAD...
table得列宽拖拽插件
05-05
表格得拖拽 可拖拽th得宽度 使td得内容可以完全显示或者隐藏
纯js表格列拉伸
lastmonitors的博客
06-26 738
表格列拉伸 通过监听鼠标事件实现 重点是通过鼠标位置与元素边框距离判断鼠标在表格边框 之后只要生成一条跟随鼠标位置的新边框 并在鼠标mouseup事件是改变边框宽度即可 ...
HTML标签笔记3
tao_meng_的博客
09-09 291
HTML标签笔记 接着上篇文章 表格 table(会使用) 创建表格 在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下： <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table> 在上面的语法中包含三对HTML标签，分别为 <table></table>、<tr></tr>、&
table 自由拉伸
我的个人技术专栏
09-23 3747
外层div的样式: div{ position:absolute; overflow:auto; scrollbar-face-color:9999ff; height:expression((document.body.clientHeight-this.offsetTop-15>this.children[0].offsetH
HTML中构建自动伸缩的表格Table
笑的自然技术博客
04-01 1万+
文章原创，转载请说明文章来自：http://blog.youkuaiyun.com/xxd851116/archive/2009/04/01/4041616.aspx【引子】在开发的过程中，表格Table有个缺陷，如果一行中某个单元格的超过一行，表格就不够美观了。下面的代码解决了这个问题：当表格被载入的时候，TD的宽度是原定的长度，不会撑开TD，也不会影响其他TD，点击某行会按照本行所有单元格中行数最
表格的自定义宽度(可拉伸)
weixin_49035434的博客
05-26 257
主要解决表格的自定义宽度 高度同理 转载至https://jingyan.baidu.com/article/6d704a1366ceab28db51ca9b.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>table</title> </head> <body> <table id="tb_3"
HTML页面实现列表列宽可拉伸改变大小功能
qq_41947500的博客
03-23 2585
使用datatables的一个插件colreorderrisize 插件在给github上即可下载 插件提供两个功能 列宽可拉伸 以及可以改变列的位置
<Table<DataType> columns={columns} dataSource={dataSource} rowClassName={(record, index) => (index % 2 === 1 ? "even" : "odd")} scroll={{ x: "max-content", y: "calc(100vh - 350px)" }} // 设置表格滚动高度 pagination={false} bordered summary={() => ( <Table.Summary fixed> <Table.Summary.Row> <Table.Summary.Cell index={0} colSpan={3}> 合计 </Table.Summary.Cell> {items.map((item, index) => ( <Table.Summary.Cell index={index + 3}>{item} </Table.Summary.Cell> ))} </Table.Summary.Row> </Table.Summary> )} />能不能给这个table变成宽度自动
最新发布
04-04
从你的代码片段来看，这是基于某个前端框架（例如 Ant Design 或类似库）构建的一个表格组件。如果你想让 `<Table>` 的列宽自动调整，并且内容能够自适应显示宽度，可以尝试以下几种方式： --- ### 解决方案：设置 `autoWidth` 和移除固定宽度 #### 修改思路： 1. **删除固定的宽度**：如果你在某些地方设置了特定的列宽（如通过 `columns` 配置），需要将其改为动态计算。 2. **启用弹性布局**：检查是否支持 CSS 弹性盒模型 (`flex`) 来实现列宽自适应。 以下是改进后的代码示例： ```jsx <Table<DataType> columns={columns.map(col => ({ ...col, width: undefined, // 删除固定宽度属性 ellipsis: true // 如果内容超出则省略号处理 }))} dataSource={dataSource} rowClassName={(record, index) => (index % 2 === 1 ? "even" : "odd")} scroll={{ x: 'fit-content', y: 'calc(100vh - 350px)' }} // 自动适配宽度 pagination={false} bordered summary={() => ( <Table.Summary fixed> <Table.Summary.Row> <Table.Summary.Cell index={0} colSpan={3}> 合计 </Table.Summary.Cell> {items.map((item, index) => ( <Table.Summary.Cell index={index + 3}>{item}</Table.Summary.Cell> ))} </Table.Summary.Row> </Table.Summary> )} /> ``` --- ### 关键点解析： 1. **移除固定宽度** 原始配置中可能存在对每一列的显式宽度设定（如 `width=200`）。你可以将它们设为 `undefined` 或者直接去掉该字段。 2. **使用 `scroll.x='fit-content'`** 将水平滚动模式改为 `'fit-content'`，这会让表格根据实际内容大小进行自适应伸缩。 3. **添加文本溢出样式** 使用 `ellipsis=true` 属性可以让过长的内容隐藏并显示省略号，避免因文字过多导致界面混乱。 4. **CSS 调整** 确保父容器的样式也允许子元素自由拉伸，例如： ```css .ant-table { table-layout: auto; /* 动态分配各列比例 */ } ``` --- ### 其他注意事项： 如果上述修改仍然无法满足需求，请进一步确认以下几个方面： - 表格所使用的 UI 框架版本是否存在限制； - 数据源结构是否有异常值影响渲染效果； - 是否存在外部全局样式的干扰。 希望以上建议对你有帮助！ ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值