如何创建带有可调整列的HTML表?

时间:2020-03-06 14:43:27  来源:igfitidea点击:

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

解决方案

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

Yahoo UI(YUI)数据表窗口小部件允许调整列的大小。它是公开可用的,但仍处于Beta中,并且YUI库非常庞大。任何实现都必须使用JavaScript / DHTML,因为默认的HTML表没有这种功能。

我们是在寻找Outlook的效果,还是出现<->来显示调整表的大小?

  • 为此,我创建了一个只有几个像素宽的div或者单元格。
  • 我更改了光标,所以它是箭头<->。
  • 在该div控件上点击使用
  • 在该div控件上单击使用时,我即时创建了另一个"浮动" div,显示了他们最终将其放置在何处。
  • 该移动与JavaScript上的mouse move事件相关。
  • 释放控件后,我便根据其将新控件移动到的位置来重新定位表格单元格的高度或者宽度。

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

jQuery的Flexigrid似乎很不错。

更新:根据@Vincent的评论,使用非常简单...有关详细信息,请参见网站,但是对于最基本的示例,请包括脚本,然后将功能钩到表中:

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

或者带有选项:

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