如何创建带有可调整列的 HTML 表格？答案

【问题标题】：How do you create an HTML table with adjustable columns?如何创建带有可调整列的 HTML 表格？
【发布时间】：2010-09-13 02:51:33
【问题描述】：

我想知道如何创建一个可以调整列宽的表格。我还没有弄清楚如何做到这一点。如果您知道这种技术的秘诀，请告诉我。

【问题讨论】：

【解决方案1】：

添加此 CSS 以调整表格的列宽...

 th {resize:horizontal; overflow:auto;}

【讨论】：

【解决方案2】：

没有简单的答案，例如“使用一些 foobar html 属性”。这是通过 javascript 和 DOM 操作完成的。
如果您想通过 Prototype 看到此功能的实现，您可以查看 TableKit。
我确信那里有 jQuery 实现...我喜欢我的旧 Prototype ;)

【讨论】：

【解决方案3】：

我相信它就像在单元格标题边缘的区域捕获鼠标单击事件一样简单，然后在拖动鼠标时动态更改列的宽度。

【讨论】：

【解决方案4】：

您是在寻找outlook 的效果还是有显示显示您调整表格大小？

【讨论】：

【解决方案5】：

Flexigrid 用于 jQuery 看起来很不错。

更新：根据@Vincent 的评论，使用非常简单...请参阅网站了解完整的详细信息，但是对于最基本的示例 - 包含脚本，然后将功能挂钩到您的表：

$('#myTableID').flexigrid();

或带有选项：

$('.classOfTables').flexigrid({height:'auto',striped:false});

【讨论】：

【解决方案6】：

Yahoo UI (YUI) data table 小部件允许调整列的大小。它是公开的，但仍处于测试阶段，而且 YUI 库非常庞大。任何实现都必须在 JavaScript/DHTML 中，因为默认的 HTML 表没有这种功能。

【讨论】：

【解决方案7】：

将resize:horizontal 应用于<th> 不适用于我的FF58。相反，我在它们每个中创建了一个 <div> 并调整了它的大小：

.mytable th div{
    resize:horizontal;
    overflow: auto;
}

【讨论】：