I've gotten this to work (at least partially). The problem I was having with my previous iteration (which was also a problem with tvanfosson's implementation) was that once you resized the headers, then the "drag" bars would not be aligned with the new column widths.
My current implementation is below, which works in Firefox 3.5 and Chrome. Unfortunately, there is some exception being thrown in IE (all versions) that is rather disconcerting. I will debug further on Monday:
$(".flexigrid").each(function() {
var grid = $(this);
var headers = grid.find(".hDiv thead th");
var row = grid.find(".bDiv tbody tr:first");
var drags = grid.find("div.cDrag div");
if (row.length >= 1) {
var cells = row.find("td");
var offsetAccumulator = 0;
headers.each(function(i) {
var headerWidth = $(this).width();
var bodyWidth = cells.eq(i).width();
var realWidth = bodyWidth > headerWidth ? bodyWidth : headerWidth;
$(this).width(realWidth);
cells.eq(i).width(realWidth);
var drag = drags.eq(i);
var dragPos = drag.position();
var offset = (realWidth - headerWidth);
var newPos = dragPos.left + offset + offsetAccumulator;
offsetAccumulator += offset;
drag.css("left", newPos);
});
}
});