通过鼠标拖拽改变表格列宽

最新推荐文章于 2024-01-23 09:32:17 发布
转载 最新推荐文章于 2024-01-23 09:32:17 发布 · 1.8k 阅读 · 0
文章标签：

#function #class

 <html>
<title>通过鼠标拖拽改变表格列宽</title>
<head>
<style>
.resizeDivClass
{
position:relative;
background-color:red;
width:2;
z-index:1;
left:expression(this.parentElement.offsetWidth-1);
cursor:e-resize;

}
</style>

<script language=javascript>
function MouseDownToResize(obj){
obj.mouseDownX=event.clientX;
obj.pareneTdW=obj.parentElement.offsetWidth;
obj.pareneTableW=theObjTable.offsetWidth;
obj.setCapture();
}
function MouseMoveToResize(obj){
    if(!obj.mouseDownX) return false;
    var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;
    if(newWidth>0)
    {
obj.parentElement.style.width = newWidth;
theObjTable.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;
}
}
function MouseUpToResize(obj){
obj.releaseCapture();
obj.mouseDownX=0;
}

</script>
</head>
<body>
<table id=theObjTable STYLE="table-layout:fixed" >
<tr bgcolor=cccccc >
<td valign=top >
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);"

onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
姓名</td>
<td valign=top >
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);"

onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
单位</td>
<td valign=top >
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);"

onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
地址</td>
</tr>

<tr>
<td>小雨</td><td>信息中心</td><td>北京市海淀区</td>
</tr>
</table>
</body>
</html>

 

 

运行结果:

 
姓名单位地址
小雨信息中心北京市海淀区


 

                

        

    

  



    



                



	

		

			

				
					
ElementUI实现el-table列的显示与隐藏和列拖拽(RuoYi分离版)

				
			

			

				

					qq_37244098的博客
				

				

					02-14
					
					1万+
					
				

			

		

		

			
				
ElementUI实现el-table列的显示与隐藏和列拖拽(RuoYi分离版)


			
		

	



                

            
              



	

		

			

				
					
鼠标拖动调整table列宽实例

				
			

			

				

					09-28
				

			

		

		

			
				
web页面中通过鼠标拖动来调整table列宽的实例，用JS实现，使用起来超级简单，只需要把JS文件导入，然后在需要实现该效果的table中套用CSS就可以了，还不会的去看实例，实例中有DEMO的页面。

			
		

	



              


  
              

                


	

		

			

				
					
鼠标拖动调整表格宽度

				
			

			

				

					10-13
				

			

		

		

			
				
鼠标拖动调整表格宽度html格式，

			
		

	





	

		

			

				
					
elementui table列的拖拽功能

				
			

			

				

					11-08
				

			

		

		

			
				
自己使用，该附件里的代码已经实现了使用vue 及elementui的table列的拖动功能。

			
		

	



		

			
		



	

		

			

				
					
鼠标拖动，改变列表宽度

				
			

			

				

					weixin_34150224的博客
				

				

					11-25
					
					368
					
				

			

		

		

			
				
参考：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>左右可拖动的内容显示区</title>
    <link rel=...

			
		

	





	

		

			

				
					
Element ui表格行、列拖拽

				
			

			

				

					sumimg的博客
				

				

					01-03
					
					1806
					
				

			

		

		

			
				
1、首先安装vuedraggable插件或直接安装sortablejs3、在需要配置的页面引入4、要点：4.1、先找到拖拽元素的父容器4.2、行拖拽：在 el-table 标签中，根据行的内容指定行的唯一标识  row-key=“id”4.3、列拖拽：额外定义两个数组，分别存储拖拽前的列顺序和拖拽后的列顺序。

			
		

	





	

		

			

				
					
html表格宽度拖拽,原生js实现 拖拽改变 table表格列宽

				
			

			

				

					06-12
				

			

		

		

			
				
以上代码会在表格中添加一个鼠标事件监听器，当用户按下鼠标并移动时，会根据鼠标的位置改变被选中列的宽度。需要注意的是，当用户拖动列宽度时，应该记录每列的初始宽度（在这里使用了 `columnWidths` 数组来记录）...

			
		

	





	

		

			

				
					
jQuery实现表格列宽自由拖拽调整功能

				
			

			

				

					
				

			

		

		

			
				
该特效允许用户通过鼠标直接拖动表格列的表头边界，动态调整每一列的显示宽度，从而实现内容的灵活查看与布局优化。这种功能常见于数据量较大、列数较多的后台管理系统、报表展示页面或数据分析平台中，能够有效解决...

			
		

	





	

		

			

				
					
jQuery实现鼠标可拖动调整表格列宽度

				
			

			

				

					01-19
				

			

		

		

			
				
实现鼠标可拖动调整表格列宽度 如图： 一、引入文件： 代码如下: [removed][removed] [removed][removed] [removed][removed] 二、TABLE 代码如下: ”myTable” border=”1″> <thead>

			
		

	





	

		

			

				
					
jQuery表格列宽可拖拽改变且兼容firfox

				
			

			

				

					10-25
				

			

		

		

			
				
2. 表格列宽拖拽功能实现：该功能的核心在于动态添加一个用于拖拽的小div元素，并利用JavaScript的事件监听机制来捕捉拖拽过程中的鼠标事件，从而实现列宽的动态调整。在这个过程中，选择了表格中的第一个tr（即表头...

			
		

	





	

		

			

				
					
vue-easytable@2.16.3版本 拖动列 动态改变列宽大小实现

				
			

			

				

					05-16
				

			

		

		

			
				
vue-easytable表格老版本有表格列宽拖功能，但是最新版插件反而不存在该功能，但是大部分表格数据存在长短不一，导致表格很难看，为了解决这种问题，只能自己动手做了。该功能如何实现，我会在资源内详细说明，如果...

			
		

	





	

		

			

				
					
表格列宽鼠标拖动 

				
			

			

				

					Ink_jay的专栏
				

				

					08-20
					
					1091
					
				

			

		

		

			
				
信息列表<!--.aline{ position:absolute; width:1px; height:100px; background-color:#000000;}.headdiv{ width:100%; cursor:default; height:100%; white-space:nowrap; text-align:ce

			
		

	





	

		

			

				
					
任意表格(table)实现拖动列(column)改变列大小

				
			

			

				

					weixin_30689307的博客
				

				

					07-06
					
					303
					
				

			

		

		

			
				
直接上代码吧，原理可以看我上一篇博文。本实现基于jquery,完美实现拖动改变表格的列大小功能，只需将代码放置在你页面的底部即可（jquery必须先引入）。


$(function () {
    var isMouseDown = false;
    var currentTh = null;
   $('table th').bind({
       mousedown...

			
		

	





	

		

			

				
					
实现bootstrap table可设置列宽和可拖动列宽

				
			

			

				

					u011853017的博客
				

				

					02-15
					
					7139
					
				

			

		

		

			
				
BootStrap-Table 固定头+可调节列宽

			
		

	





	

		

			

				
					
CSS 控制table 滑动及调整列宽等问题总结

				
			

			

				

					weixin_30443075的博客
				

				

					02-07
					
					752
					
				

			

		

		

			
				
一. 通过css控制table y方向上滚动
html中没有滚动条，可以根据overflow属性的scroll来对table显示不完全的内容进行滚动.
只是y方向上滚动，很简单,只要设置div的height高度。然后设置overflow-y:scroll。这样当内容高度超过了height设定的高度，就会出现滚动条
css:
.scroll_y{
max-height: 200px...

			
		

	





	

		

			

				
					
基于若依前后端分离的el-table设置

					
最新发布

				
			

			

				

					敲厉害的燕宝的博客
				

				

					01-23
					
					2626
					
				

			

		

		

			
				
借鉴他人，亲测有效！
el-table 列宽自适应+列排序+列固定

			
		

	





	

		

			

				
					
【若依(ruoyi)】table定制列宽

					
热门推荐

				
			

			

				

					sayyy的专栏
				

				

					07-21
					
					1万+
					
				

			

		

		

			
				
前言

若依(ruoyi)： v4.3
mysql：5.5.40
BootstrapTable

分析
若依(ruoyi)的前端基于Bootstrap的轻量级表格插件 BootstrapTable 实现的表格。因此使用BootstrapTable修改列宽的方法即可。
经过网上检索，BootstrapTable提供的width属性定制列宽无效。需要使用其它方法。
目前找到了2个可行的方法：

修改样式 .th-inner  的宽度。
在值的外层套上div，在div上指定宽度。

修改样式 .th-inner 

			
		

	





	

		

			

				
					
表格拖拽改变列宽

				
			

			

				

					web_hj的博客
				

				

					06-01
					
					1547
					
				

			

		

		

			
				
<template>
  <div>
    <div>
      <table>
        <thead>
        <tr>
          <th v-for="item,index in heads" :id="'th_'+index" style="width:120px;">
   ...

			
		

	





	

		

			

				
					
鼠标拖动改变表格宽度

				
			

			

				

					wenjx007的专栏
				

				

					08-11
					
					1815
					
				

			

		

		

			
				
  在网上搜索了好久，找到的都是只能在IE下有效的，后来终于找到了支持firefox的了。  table拖动(兼容Firefox 3.5/IE6)，固定表格宽度  <!--.bg {    font-size:12px;color:#000000;table-layout:fixed;//这个属性可以隐藏文字}.bg td{    font-

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值