11

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

4

7 回答 7

7

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

 th {resize:horizontal; overflow:auto;}
于 2018-01-07T23:16:54.470 回答
6

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

于 2008-09-25T15:15:37.410 回答
3

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

于 2008-09-25T14:34:14.110 回答
3

您是在寻找 Outlook 的效果还是出现 <-> 来显示您调整表格的大小？

  • 我为此所做的，是创建一个只有几个像素宽的 div 或单元格。
  • 我改变了光标，所以它是一个箭头<->。
  • 单击该 div 控件上的使用
  • 在单击该 div 控件上的使用时，我会即时创建另一个“浮动”div，以显示它们最终将其定位的位置。
  • 移动与 JavaScript 上的鼠标移动事件相关联。
  • 一旦释放控件，我就会根据他们移动新控件的位置重新定位表格单元格的高度或宽度。
于 2008-09-25T15:13:03.377 回答
3

用于 jQuery 的Flexigrid看起来很不错。

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

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

或带有选项：

$('.classOfTables').flexigrid({height:'auto',striped:false});
于 2008-09-27T03:09:16.007 回答
1

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

于 2008-09-25T14:41:06.307 回答
1

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

.mytable th div{
    resize:horizontal;
    overflow: auto;
}
于 2018-03-29T08:18:22.660 回答