如何创建具有可调整列的 HTML 表格？

Question

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

Answer 1

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

 th {resize:horizontal; overflow:auto;}

Answer 2

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

Answer 3

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

Answer 4

你是在寻找outlook的效果还是有<-> 显示的内容是为了告诉您调整表格大小？

• 我为此所做的是创建一个只有几个像素宽的 div 或单元格。
• 我更改了光标，使其成为箭头 <->。
• 单击该 div 控件上的使用 单击
• 该 div 控件上的使用时，我会动态创建另一个“浮动”div，显示它们最终将其放置的位置。
• 该移动与 JavaScript 上的鼠标移动事件挂钩。
• 释放控件后，我会根据新控件移动的位置重新定位表格单元格的高度或宽度。

Answer 5

Flexigrid for jQuery 看起来非常不错。

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

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

或使用选项:

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

Answer 6

Yahoo UI (YUI) 数据表 小部件允许调整列大小。 它是公开可用的，但仍处于测试阶段，而且 YUI 库相当庞大。 任何实现都必须采用 JavaScript/DHTML，因为默认的 HTML 表不具备这种功能。

Answer 7

将 resize:horizo​​ntal 应用于 不适用于我的 FF58。 相反，我在每个文件中创建了一个

并使其可调整大小：

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