<html>
<head>
<title> 动态调整列宽-包子剑客-V3 </title>
<!--2010.02.04 包子剑客 广州-->
<style>
table{table-layout:fixed}
td{white-space:nowrap;overflow: hidden;text-overflow:ellipsis;}
th{border:1px solid Black;}
</style>
<script>
var curCol,curTable;//获取左边的位置
var curCol_left,newPlace;
var dragState=0;
function getTable(item)
{
var obj = null;
do {
if (item.tagName == "TABLE"){
obj = item;
break;
}
item = item.offsetParent;
} while (item != null);
return obj;
}
function calculateOffset(item, offsetName)
{
var totalOffset = 0;
do{
totalOffset += eval('item.offset' + offsetName);
item = item.offsetParent;
} while (item != null);
return totalOffset;
}
function drag_colMov(objCol){
if (dragState > 1) return true;
curCol_left = calculateOffset(objCol, "Left");
curTable =getTable(objCol);
if (window.event.x + window.document.body.scrollLeft > curCol_left + objCol.offsetWidth - 5){
//移动到了相应的部位，改变鼠标指针
dragState = 1;
curTable.style.cursor = "col-resize";
curCol = objCol;
}else if (dragState<=1){
dragState = 0;
curTable.style.cursor = "default";
}
}
function drag_colOut(objCol){
if (dragState<=1) {
curTable.style.cursor = "default";
dragState = 0;
}
}
function drag_tableDow(objTable){
if (1 == dragState){
curTable.style.cursor = "col-resize";
dragState = 2;
}else{
curTable.style.cursor = "default";
}
}
function drag_tableMov(objTable) {
if (dragState >= 2) {
curTable.style.cursor = "col-resize";
dragState=3;
var newPlace = window.event.x + window.document.body.scrollLeft
var curWidth = newPlace - curCol_left;
curCol.style.width = curWidth + "px"; //调整列宽度
}
}
function drag_tableUp(objTable){
curTable.style.cursor = "default";
dragState=0;
}
</script>
</head>
<body>
<!--
使用自动省略的条件：
table 样式包含 style="table-layout:fixed;"
td 样式包含 style="white-space:nowrap;overflow: hidden;text-overflow:ellipsis;"
-->
<table style="border:1px solid red;table-layout:fixed;" onmousedown="drag_tableDow(this)" onmouseup="drag_tableUp(this)" onmousemove="drag_tableMov(this)" >
<tr>
<th width="25%" onmousemove="drag_colMov(this)" onmouseout="drag_colOut(this)">id</th>
<th width="10%" onmousemove="drag_colMov(this)" onmouseout="drag_colOut(this)">name</th>
<th width="15%" onmousemove="drag_colMov(this)" onmouseout="drag_colOut(this)">pass</th>
<th>sec</th>
</tr>
<tr>
<td>多出部分自动省略的效果，这里有自动省略的效果</td>
<td>baoziasfgdsgasdgsadfsffsdf</td>
<td>12345421545235235636</td>
<td>1</td>
</tr>
<tr>
<td>112412453245235235325</td>
<td>zhqwryqeirtearfew</td>
<td>1254215qei略的略的qeiqeiqei45234</td>
<td>0</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
web页面中通过鼠标拖动来调整table列宽的实例，用JS实现，使用起来超级简单，只需要把JS文件导入，然后在需要实现该效果的table中套用CSS就可以了，还不会的去看实例，实例中有DEMO的页面。
一个jquery插件，可以方便地将html中的table实现为可以手动拖动并调整列宽。使用方法简单，例$("#tb").ZTable();
可自动调整列宽的列表CListCtrl控件,附VCDemo
vue-easytable表格老版本有表格列宽拖功能，但是最新版插件反而不存在该功能，但是大部分表格数据存在...若将ve-table封装以组件形式引用，可全局实现拖动表格列 改变列宽大小效果。如何封装我也会在资源内详细说明。
修改bootstrap table设置列宽问题，增加插件和bootstrap table组合可随意拖动表格的列宽
因为需求的不同，需要自己实现element表格拖拽调整列宽和行高，目前已实现，现记录了实现的方式。 实现说明：全部基于原生js,不依赖任何插件，可以直接使用。 实现思路：1.列宽的调整最终是通过调整如上图的col...
通过ext2.0.rar可以创建相当完美的Grid．该Grid支持本地、远程排序，动态调整列宽以及列的顺序等。
打印DataGrid数据的控件，有源...1、动态调整列宽 2、自定义双层表头打印，并可保存双层结构 3、超宽报表自动分页打印 4、自定义表头表尾信息 5、报表尾合计功能 6、可随意隐藏或打印列 7、可调整打印的列名称
PB数据窗口自适应列宽！Grid类；
内容索引:.NET源码,Ajax相关,AJAX,GridView 中模仿GridView列表的列宽拖动功能示例程序，并且可以实现鼠标经过、点击、不响应时候分别用不同的颜色来区分，移动可改变列的顺序、改变列宽、排序，chy.xml用于存储...
DataGridView1.AutoSizeColumnsMode=DataGridViewAutoSizeColumnsMode.AllCellsExceptHeader ///根据数据内容自动调整列宽 DataGridView1.AutoSizeRowsMode = DataGridViewAutoSizeRowsMode.AllCellsExceptHeaders /...
winform动态加载CheckBox集合的多功能控件源码，可设置行高、每行的数量，以及是否允许多选，自动调整列宽，选中项突出显示，开放Checked改变时的action。
手动调整表格大小调的太累了，所以自己封装了QTableView, 支持自动调整每一行和每一列的大小，只需要传入宽高和头就可以
调整角度表的大小 一个用于调整表列大小的AngularJS模块！ 演示版 您可以通过尝试演示。 您也可以使用该示例作为在自己页面上实现该模块的示例。 来源可以在 安装 凉亭 bower install angular-table-resize NPM npm...
4.3 基本操作技巧 4.3.4 合并居中单元格 4.3.5 调整单元格的列宽、行高 使用对话框调整列宽与行高 使用鼠标调整列宽或行高 调整最适合的列宽与行高 批量调整列宽 隐藏行或列 计算机应用基础课件——Excel-电子表格...
2、以及本人亲自封装并测试通过的源代码，平时都是使用这些代码操作word和excel，可实现非常方便的操作读写excel和word，在excel中可实现单元格合并，列宽调整等等，并且在word中可添加多个图片。 3、最后是本人亲自...
鼠标拖动表格改变宽度，动态Ajax数据排序示例，超出单元格隐藏内容，拖动单元格改变列宽，点击标题可排序↑↓升序、降序，拖动单元格调整宽度。代码中有一个已优化好的封装类，需要的可用在其它的JS项目中。
产品特点:DataGridView控件可移动,可隐藏和显示,列宽可调整, 功能强大,界面人性化.可用于动态现实数据或作为输入数据的 数据源. 使用步骤: 1.打开IIS,新建一个网站. 2.设置为DataGridView.html为默认文档. 3.在iis...
产品特点:DataGridView控件可移动,可隐藏和显示,列宽可调整, 功能强大,界面人性化.可用于动态现实数据或作为输入数据的 数据源. 使用步骤: 1.打开IIS,新建一个网站. 2.设置为DataGridView.html为默认文档. 3.在iis...
PB中数据窗口自动宽度方法. PB中数据窗口自动宽度方法. PB中数据窗口自动宽度方法. PB中数据窗口自动宽度方法. PB中数据窗口自动宽度方法. PB中数据窗口自动宽度方法. PB中数据窗口自动宽度方法. ...