带有bz代码的可调整大小的表列 [英] Resizable table columns with bz code

问题描述

我已按照 bz的演示创建了可调整大小的表格列代码

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

但是当我创建超过30列时，代码不起作用。我正在创建的表非常简单：

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?

推荐答案

为什么不靠自己做？使表格可调整大小非常简单：

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

首先将此添加到您的onLoad：

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;
}

自己做的好处是你有完全的控制权并可以根据您的需求更改外观和功能。否则，如果您可以发布一个小提琴，那将是很好的，所以如果您添加超过30行，我们可以看到出了什么问题。

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.

这篇关于带有bz代码的可调整大小的表列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！