Question

我有这个简单的html表

<table id="tablex">
    <tr>
        <th>col1</th>
        <th>col2</th>
    </tr>
    <tr>
        <td>data1</td>
        <td>data2</td>
    </tr>
</table>

我尝试使用colResizable调整列的大小但问题是当我调整表的特定列的大小时，可调整大小的列的下一列会受到影响，因为表的整个宽度是固定的。

我尝试过发布here和另一个here的其他解决方案，但同样存在问题。是否有其他方法可以使用jquery库或javascript函数之一调整列的大小？

Answer 1

你可以使用colResizable 1.5，它允许两种不同的方法来调整表的大小：固定和非固定。

默认情况下，它是固定的，这意味着当您调整列的大小时，下一个缩小或扩展以适合整个表。在固定模式下，表宽度根本不会改变。

我认为你要的是非固定模式。在非固定模式下，您可以单独调整每个列的大小，因此如果更改列的宽度，其他列保持相同的状态（但表的大小将增加与列相同的量）。

您可以在其网站上查看一些示例：http://www.bacubacu.com/colresizable

但我想你正在寻找这样的东西：

 $("#nonFixedSample").colResizable({fixed:false, liveDrag:true});

Answer 2

我有同样的问题：Resizable table columns with jQuery (table wider than page)

我的解决方案是将我的列标题<th>的内容放在另一个标记中 - 我使用了链接（<a> s）。

我没有对<th>做任何事情，而是必须将<a>的样式设置为display: block

然后只是$('th a').resizable({handles:'e'});

请参阅http://jsfiddle.net/u32a1ccL/

这使用jQuery和jQuery UI

调整html表的列

2 个答案: