Resizable table columns with bz code

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 simple:

<table class="resizable" border="1">
        <tr>
            <td name="col1" align="center">Column 1</td>
            <td name="col2" align="center">Column 2</td>
            <td name="col3" align="center">Column 3</td>
            <td name="col4" align="center">Column 4</td>
            <td name="col5" align="center">Column 5</td>
            <td name="col6" align="center">Column 6</td>
        </tr>
</table>

Does anyone have any ideas which line should I change to make the code work?

Answers:

Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.