StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I also recommend to use jQuery UI Resizable with some enhancements. I could make it running with valid HTML, updating the table's COLGROUP area on resize. I described the full solution at <a href="http://ihofmann.wordpress.com/2012/07/31/resizable-table-columns-with-jquery-ui/" rel="nofollow">http://ihofmann.wordpress.com/2012/07/31/resizable-table-columns-with-jquery-ui/</a></p> <p>The short one would be:</p> <p>1) The HTML table specifies the initial width in its COLGROUP area and has CSS property table-layout:fixed. 2) Decorate TH elements with jQuery UI’s .resizable(). 3) On resizing start: Find the matching COL element of active TH and remember original width. 4) On resizing: Calculate the resize delta and update (increase/decrease) the selected COL element. This will resize the whole column with every browser.</p> <pre><code>$(".resizable th").resizable({ handles: "e", // set correct COL element and original size start: function(event, ui) { var colIndex = ui.helper.index() + 1; colElement = table.find("colgroup > col:nth-child(" + colIndex + ")"); // get col width (faster than .width() on IE) colWidth = parseInt(colElement.get(0).style.width, 10); originalSize = ui.size.width; }, // set COL width resize: function(event, ui) { var resizeDelta = ui.size.width - originalSize; var newColWidth = colWidth + resizeDelta; colElement.width(newColWidth); // height must be set in order to prevent IE9 to set wrong height $(this).css("height", "auto"); } }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload