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

Question

我想知道如何创建一个可以调整列宽的表。我还没弄明白怎么做。如果你知道这种技术的秘诀请告诉我。

Answer 1

没有简单的答案，例如“使用一些foobar html属性”。 这是通过javascript和DOM操作完成的。
如果你很想看到Prototype的这个功能的实现，你可以看一下TableKit。
我确信那里有jQuery实现...我喜欢我的好老原型;）

Answer 2

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

Answer 3

您是在寻找展望的效果还是＆lt; - ＆gt;显示出来调整表格的大小？

• 我为此所做的是创建一个只有几个像素宽的div或单元格。
• 我更改光标，使其为箭头＆lt; - ＆gt;。
• 点击使用该div控件
• 点击对该div控件的使用，我动态创建了另一个“浮动”div，显示了它们最终定位的位置。
• 此动作与JavaScript上的鼠标移动事件相关联。
• 一旦释放控件，我就会根据移动新控件的位置重新定位表格单元格的高度或宽度。

Answer 4

Flexigrid对于jQuery看起来很可爱。

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

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

或选项：

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

Answer 5

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

 th {resize:horizontal; overflow:auto;}

Answer 6

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

Answer 7

调整大小：水平应用于我的FF58不起作用。相反，我在每个中创建了一个并使其可调整大小

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