Resizable Spalten der Tabelle

Empfehle ich die Nutzung jQuery-UI-Resizable mit einigen Verbesserungen. Das plugin konzentriert sich wirklich nur auf die Größe und ermöglicht die vollständige Anpassung, da können Sie Ihre eigene callback-Funktionen, die bei jedem Anlass. Standardmäßig ist jedoch das plugin nicht reize table-Header, aber ich könnte es machen, laufen mit gültigen HTML-Code, die Tabelle zu aktualisieren, die COLGROUP-Bereich auf Größe ändern.

Die konkrete Vorstellung wäre:

1. Die HTML-Tabelle gibt die ursprüngliche Breite in seiner COLGROUP-Bereich und hat die CSS-Eigenschaft table-layout:fixed.
2. Schmücken TH-Elemente mit jQuery UI ist .resizable().
3. Auf die Größenänderung zu starten: Finden Sie die passende COL-element der aktiven TH und erinnern ursprünglichen Breite.
4. Auf die Größenänderung: Berechnen Sie die Größe von delta-und update - (erhöhen/verringern) der ausgewählten COL-element. Dadurch werden die Größe der gesamten Spalte, die mit jedem browser.

Plugin init:

$(".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");
 }
});

Beschrieb ich die vollständige Lösung, einschließlich JavaScript, HTML markup, cross-browser CSS-und Live-Demo an http://ihofmann.wordpress.com/2012/07/31/resizable-table-columns-with-jquery-ui/