<!DOCTYPE html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery表格可拖动调整列宽度大小|jsfoot 网页特效</title>
<meta name="keywords" content="jQuery表格可拖动调整列宽度大小">
<meta name="description" content="jquery特效,js特效,flash特效,div+css教程,html5教程">
<script type="text/javascript" src="./jQuery表格可拖动调整列宽度大小 jsfoot 网页特效_files/jquery.1.4.2-min.js"></script>
</head>
<body style="">
<script type="text/javascript">
//屏蔽右键菜单
document.oncontextmenu = function (event) {
if (window.event) {
event = window.event;
} try {
var the = event.srcElement;
if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
return false;
}
return true;
} catch (e) {
return false;
}
}
</script>
<div class="shortcut">
<h1><a href="http://www.jsfoot.com/jquery/table/more/2013-06-13/1073.html">jQuery表格可拖动调整列宽度大小</a></h1>
<span class="right">
<a href="http://www.jsfoot.com/jquery/table/more/2013-06-13/1073.html">
<strong>下载特效</strong>
</a>
</span>
<div class="clr"></div>
</div>
<!--/ Codrops top bar -->
<div class="headeline"></div>
<!--演示内容开始-->
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style-type: none;
}
a, img {
border: 0;
}
table {
empty-cells: show;
border-collapse: collapse;
border-spacing: 0;
}
body {
font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
}
.demo {
width: 760px;
margin: 40px auto;
}
.demo h2 {
font-size: 18px;
height: 52px;
color: #3366cc;
text-align: center;
}
.listext th {
background: #eee;
color: #3366cc;
}
.listext th, .listext td {
border: solid 1px #ddd;
text-align: left;
padding: 10px;
font-size: 14px;
}
.rc-handle-container {
position: relative;
}
.rc-handle {
position: absolute;
width: 7px;
cursor: ew-resize;
cursor: e-resize;
*cursor: pointer;
margin-left: -3px;
}
</style>
<div class="demo">
<h2>jQuery拖动调整表格列宽度</h2>
<div class="rc-handle-container" style="width: 760px;">
<div class="rc-handle" style="left: 75px; height: 169px;"></div>
<div class="rc-handle" style="left: 307px; height: 169px;"></div>
</div>
<table width="100%" class="table listext" data-resizable-columns-id="demo-table">
<thead>
<tr>
<th data-resizable-column-id="#">#</th>
<th data-resizable-column-id="first_name">First Name</th>
<th data-resizable-column-id="last_name">Last Name</th>
<th data-resizable-column-id="username" id="username-column" data-noresize="">Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="./jQuery表格可拖动调整列宽度大小 jsfoot 网页特效_files/jquery.js"></script>
<script type="text/javascript" src="./jQuery表格可拖动调整列宽度大小 jsfoot 网页特效_files/jquery.resizableColumns.js"></script>
<script type="text/javascript">
$(function () {
$("table").resizableColumns({});
});
</script>
<!--演示内容结束-->
</body>
</html>
jQuery表格可拖动调整列宽度大小.rar （5个子文件） 
jQuery表格可拖动调整列宽度大小 jQuery表格可拖动调整列宽度大小 jsfoot 网页特效_files 
jquery.js 91KB jquery.resizableColumns.js 5KB jquery.1.4.2-min.js 83KB style.css 3KB jQuery表格可拖动调整列宽度大小 jsfoot 网页特效.htm 5KB
- 1
- 2
- 3
- 4
- 5
- 6
前往页