Resizable table columns with bz code

Question

I\'ve created a resizable table columns code by following bz\'s demo

But when I create more than 30 columns, the code does not work. The table I\'m creating is pretty si

Answer 1

Why not doing it on your own? Make a Table resizeable is pretty simple:

First add this to your onLoad:

$(".gridTableSeparator").bind("mousedown", function () {
    var that = $(this).parent();
    $("body").bind("mousemove", function (event) {
        that.attr("width", event.pageX - that.offset().left);
    });
    $("body").bind("mouseup", function (event) {
       $(this).unbind("mousemove mouseup");
    });
 });

Your table Header should look like this:

<td>
    <div class="gridTableSeparator"></div>
    <div class="gridTableHeadline">Tableheadline</div>
</td>

And format the separator and the headline like this:

.gridTableSeparator 
{
  width: 3px; 
  right:-4px;
  height:40px;
  float:right;    
  position:relative;  
  cursor: e-resize;  
}
.gridTableHeadline 
{
  line-height: 40px;  
  overflow: hidden;
}

benefits of doing it on your own is that you have the full control and can change the look and functionality for your needs. Otherwise it would be great if you can post a fiddle, so we can see what went wrong if you add more than 30 rows.