调整html表格的列大小答案

【问题标题】：Resize column of html table调整html表格的列大小
【发布时间】：2015-11-07 19:02:25
【问题描述】：

我有这个简单的 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 函数之一来调整列的大小？

【问题讨论】：

当用户调整列宽时，其他列的宽度和/或表格的宽度会发生什么变化？
@RichardEv 它也会调整大小，就像示例 here 一样，但尊重的结果是即使表格宽度发生变化，其他列也不会改变。
你能画出来并向我们展示你想要达到的目标吗，使用油漆。
@Drwhite - 为什么不使用 colResizable，然后不将表格宽度设置为固定？
@RichardEv：不，表格的宽度不是固定的，但列仍然会受到调整其他列大小的影响（例如，如果我调整 col1 的大小，那么 col2 也会调整大小，这不是受尊重的结果）跨度>

标签： javascript jquery html resize

【解决方案1】：

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

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

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

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

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

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

【讨论】：

不幸的是，colResizable 存在填充问题。请参阅问题 #33 和 #45。

【解决方案2】：

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

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

我不得不将<a>s 的样式设置为display: block，而不是对<th> 做任何事情

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

见http://jsfiddle.net/u32a1ccL/

这使用了 jQuery 和 jQuery UI

【讨论】：