Documentation
English SpanishEnglish
Resize HTML tables and columns made easy
About this plugin
colResizable is a jQuery plugin to resize table columns dragging them manually. It is compatible with both mouse and touch devices and has some nice features such as layout persistence after page refresh or postback.
This plugin comes in handy when dealing with large tables improving usability. It is tiny in size (colResizable 1.0 is only 2kb) and it is fully compatible with all major browsers (IE7+, Firefox, Chrome and Opera).
colResizable can also be used as , give it a try!
Quick tour
This is a basic example of what this plugin can do:
headerheaderheaderheader
cellcellcellcell
cellcellcellcell
cellcellcellcell
colResizable was developed since no other similar plugin with the below listed features was found:
Compatible with mouse and touch devices (PC, tablets, and mobile phones)
Compatibility with both percentage and pixel-based table layouts
Column resizing not altering total table width (optional)
No external resources needed (such as images or stylesheets)
Optional layout persistence after page refresh or postback
Customization of column anchors
Small footprint
Cross-browser compatibility (IE7+, Chrome, Safari, Firefox)
To use this plugin a script reference must be added to the colResizable.min.js file in the head section of the document once jQuery is loaded. To enhance a table (or collection of tables) point it with a jQuery wrapper and apply the colResizable() method.
Resizing grips will be located in the table according to its first row layout. For this reason, it is not recommended using colspan values in those cells. If colspan in the first row is required, just add an extra row before your table heading with no height so it won't be visible.
In order to prevent strange behaviors while resizing a column, you are highly encouraged to define the width of the table, either by using its width attribute, an inline style, or a css rule.
&script src="js/jquery.js"&&/script&
&script src="js/colResizable.min.js"&&/script&
&table width="100%" &
&tr& &th& header &/th& &th& header &/th& &/tr&
&tr& &td& cell &/td& &td& cell &/td& &/tr&
&tr& &td& cell &/td& &td& cell &/td& &/tr&
$(function(){
$("table").colResizable();
Customization
colResizable provides some customization attributes in order to modify its appearance and the way it works:
liveDrag: [type: boolean] [default: false] [version: 1.0]
When set to true the table layout is updated while dragging column anchors. liveDrag enabled is more CPU consuming so it is not recommended for slow computers, specially when dealing with huge or extremely complicated tables.
fixed: [type: boolean] [default: true] [version: 1.5]
It is used to set how the resize method works. In fixed mode resizing a column does not alter total table width, which means that when a column is expanded the next one shrinks. If fixed is set to false then table can change its width and each column can shrink or expand independently.
postbackSafe: [type: boolean] [default: false]
[version: 1.3]
This attribute can be used to specify that the manually selected column widths must remain unaltered after a postback or browser refresh.
This feature is mainly oriented to those pages created with server-side logic (codebehind), such as PHP or .NET, and it is only compatible with browsers with sessionStorage support (all modern browsers). However, if you are targeting older browsers (such as IE7 and IE8) you can still emulate sessionStorage using . It is important to note that some browsers (IE and FF) doesn’t enable the sessionStorage object while running the website directly from the local file system, so if you want to test this feature it is recommended to view the website through a web server or use browsers such as Chrome or Opera which doesn’t have this limitation. Don't worry about compatibility issues, once your site is up on the internet, all browsers will act in exactly the same way.
partialRefresh: [type: boolean] [default: false]
[version: 1.5]
This attribute should be set to true if the table is inside of an updatePanel or any other kind of partial page refresh using ajax. Table's ID should be same before and after the partial partial refresh.
headerOnly: [type: boolean] [default: false]
[version: 1.2]
This attribute can be used to prevent vertical expansion of the column anchors to fit the table height. If it is set to true, column handler's size will be bounded to the first row's vertical size.
innerGripHtml:
[type: string] [default: empty string] [version: 1.0]
Its purpose is to allow column anchor customization by defining the HTML to be used in the column grips to provide some visual feedback. It can be used in a wide range of ways to obtain very different outputs, and its flexibility can be increased by combining it with the draggingClass attribute.
draggingClass: [type: string] [default: internal css class] [version: 1.0]
This attribute is used as the css class assigned to column anchors while being dragged. It can be used for visual feedback purposes.
disable: [type: boolean] [default: false] [version: 1.0]
When set to true it aims to remove all previously added enhancements such as events and additional DOM elements assigned by this plugin to a single or collection of tables. It is required to disable a previously colResized table prior its removal from the document object tree.
minWidth: [type: number] [default: 15]
[version: 1.1]
This value specifies the minimum width (measured in pixels) that is allowed for the columns.
hoverCursor: [type: string] [default: "e-resize"] [version: 1.3]
This attribute can be used to customize the cursor that will be displayed when the user is positioned on the column anchors.
dragCursor: [type: string] [default: "e-resize"] [version: 1.3]
Defines the cursor that will be used while the user is resizing a column.
flush: [type: boolean] [default: false]
[version: 1.3]
Flush is only effective when postbackSafe is enabled. Its purpose is to remove all previously stored data related to the current table layout to get it back to its original layout preventing width restoration after postback.
marginLeft: [type: string / null] [default: null] [version: 1.3]
If the target table contains an explicit margin-left CSS rule, the same value must be used in this attribute (for example: "auto", "20%", "10px"). The reason why it is needed it is because most browsers (all except of IE) don’t allow direct access to the current CSS rule applied to an element in its original units (such as "%", "em" or "auto" values). If you know any workaround which doesn’t involve iteration through all the styles defined in the site and any other external dependencies, please let me know!
marginRight: [type: string / null] [default: null] [version: 1.3]
It behaves in exactly the same way than the previous attribute but applied to the right margin.
onResize: [type: callback function] [default: null] [version: 1.0]
If a callback function is supplied it will be fired when the user has ended dragging a column anchor altering the previous table layout. The callback function can obtain a reference to the updated table through the currentTarget attribute of the event retrieved by parameters
onDrag: [type: callback function] [default: null] [version: 1.1]
This event is fired while dragging a column anchor if liveDrag is enabled. It can be useful if the table is being used as a multiple range slider. The callback function can obtain a reference to the updated table through the currentTarget attribute of the event retrieved by parameters
General sample, attributes and events
In the following sample, column anchors are customized to use a user-defined appearance. This can be achieved by defining the HTML segment that will be appended to each anchor and using some CSS rules to style it up. DraggingClass can also be used in order to change the appearance of the anchors while being dragged.
A callback event is defined to obtain the new dimensions of the table layout after resizing its columns.
headerheaderheader
cellcellcell
cellcellcell
cellcellcell
columns widths: 191 192 192
use custom anchors
$(function(){
var onSampleResized = function(e){
var table = $(e.currentTarget); //reference to the resized table
$("#sample").colResizable({
liveDrag:true,
gripInnerHtml:"&div class='grip'&&/div&",
draggingClass:"dragging",
onResize:onSampleResized
Postback size persistence
Column size persistence after (full or partial) page refresh is supported, as shown in the following example:
Partial refresh
var postbackSample = function(){
$("#updatePanelSample").colResizable({
liveDrag:true,
postbackSafe:true,
partialRefresh:true
var fakePostback = function(){
//simulate postback here
setTimeout(function(){
//on postback over
onPostbackOver();
var onPostbackOver = function(){
postbackSample();
Percentage-based layouts
In the following demo, probably the most interesting feature of this plugin is shown: it is compatible with both pixel and percentage-based layouts. This means that the table outter width will remain constant as columns are resized. If the parent container of the table is resized and its width is measured in percentage, the table will be updated just as expected. To test it, resize the table object using the
handler located on the bottom-right corner.
NOTE: jQuery-UI resizable method was used to simulate a liquid layout in this sample, but it is not needed in a real world environment.
headerheaderheaderheader
cellcellcellcell
cellcellcellcell
cellcellcellcell
Non-fixed width tables
Setting colResizable to non-fixed mode will let the table be resized, so while changing one column the others will stay the same size.
headerheaderheader
cellcellcell
cellcellcell
cellcellcell
$("#nonFixedSample").colResizable({fixed:false});
multiple range slider
colResizable can also be used to emulate multiple range sliders, enabling a wide range of appearances
It can also look like a typical range-slider using the gripInnerHtml attribute. Values can be calculated in the callback function by comparing column width with the table size as follows:
Ranges: 25%, 25%, 25%, 25%
$("#sample5").colResizable({
liveDrag:true,
draggingClass:"rangeDrag",
gripInnerHtml:"&div class='rangeGrip'&&/div&",
onResize:onSlide,
minWidth:8
var onSlider = function(e){
var columns = $(e.currentTarget).find("td");
var ranges = [], total = 0, i, s = "Ranges: ",
for(i = 0; i&columns. i++){
w = columns.eq(i).width()-10 - (i==0?1:0);
ranges.push(w);
for(i=0; i&columns. i++){
ranges[i] = 100*ranges[i]/
carriage = ranges[i]-w
s+=" "+ Math.round(ranges[i]) + "%,";
s=s.slice(0,-1);
$("#sample5Text").html(s);
Highlighted ranges can be done using a different style for a single or multiple columns as shown in the following sample:
Selected range: 50.0% starting at: 25.0%
var onSlide = function(e){
var columns = $(e.currentTarget).find("td");
var ranges = [], total = 0, i,
for(i = 0; i&columns. i++){
w = columns.eq(i).width()-14 - (i==0?1:0);
ranges.push(w);
for(i=0; i&columns. i++){
ranges[i] = 100*ranges[i]/
$("#text").html("Selected: " ranges[1]+ "%");
Download latest version
VersionChangelogDownloadSource
Version 1.5
Version 1.4
Version 1.3
Version 1.2
Version 1.1
Version 1.0Released version 1.0
You can use or distribute colResizable for free for both personal or commercial purposes.
is also released in order to allow custom modifications to adjust it to your own personal needs. In both cases, my full name must remain intact in the script file.
colResizable was released under the
colResizable was developed by Alvaro Prieto Lauroba in 2011. Feel free
for further information or just leave a comment in our .
Acknowledgements
Acknowledgements to my family, Jennifer Villarroel, Jorge Villabona, Ismael Gaudioso and the whole jQuery development team.
Quick LinksAlter table tabname add column col type.的海词问答与网友补充：
相关词典网站：GridView绑定 动态生成的Datatable 如何在显示出DataColumn的Caption 100分求思路 顶者有分 必结贴
[问题点数：100分，结帖人aspvfp]
GridView绑定 动态生成的Datatable 如何在显示出DataColumn的Caption 100分求思路 顶者有分 必结贴
[问题点数：100分，结帖人aspvfp]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
相关推荐：
2011年4月 .NET技术大版内专家分月排行榜第二
2011年3月 .NET技术大版内专家分月排行榜第三
2012年1月 .NET技术大版内专家分月排行榜第一2011年12月 .NET技术大版内专家分月排行榜第一2011年11月 .NET技术大版内专家分月排行榜第一2008年3月 .NET技术大版内专家分月排行榜第一
2010年4月 .NET技术大版内专家分月排行榜第二2008年2月 .NET技术大版内专家分月排行榜第二
本帖子已过去太久远了，不再提供回复功能。