2

我有这个简单的 html 表

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

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

我尝试过在此处发布的另一种解决方案和此处发布的另一种解决方案，但存在相同的问题。有没有其他方法可以使用 jquery 库或 javascript 函数之一来调整列的大小？

4

2 回答 2

3

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

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

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

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

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

 $("#nonFixedSample").colResizable({fixed:false, liveDrag:true});
于 2014-12-23T08:47:41.663 回答
0

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

我的解决方案是将列标题<th>s 的内容放在另一个标签中——我使用了链接 ( <a>s)。

我<th>不得不将<a>s 的样式设置为display: block

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

见http://jsfiddle.net/u32a1ccL/

这使用 jQuery 和 jQuery UI

于 2014-12-11T08:30:51.113 回答