如何使用JavaScript/Jquery调整跨两个HTML表格的表列的大小

我想添加列大小调整功能到我的html表格。 用户应该能够在运行时调整列大小。我查看了各种示例和插件，但是当你有一张桌子时，它们都可以工作。当表头和表体都是相同table标签的一部分，就像这样：如何使用JavaScript/Jquery调整跨两个HTML表格的表列的大小

<table width="100%" > 
    <tr> <th> header </th> <th> header </th> </tr> 
    <tr> <td> cell </td> <td> cell </td> </tr>       
    <tr> <td> cell </td> <td> cell </td> </tr>       
    </table>

我使用Jquery DataTable这使得两个部分表。列标题是一个表的一部分，而主体是另一个表的一部分。有关更多信息，请参阅附加图像。 enter image description here

如何在这种情况下添加列大小调整功能？

锦上添花：我需要支持IE 8

来源

2014-09-23 SharpCoder

可能重复：http://stackoverflow.com/questions/2905857/table-column-resizing-drag-n-dropping-in-jquery – Swetha 2014-09-23 12:08:23

@Swetha：没它不行。当只有1个表格时，您共享的链接调整列的大小。感谢您的回复，但:) – SharpCoder 2014-09-23 12:17:30

不知道这是否会工作，但你可能能够把表中的数据放在一个（textarea）和调整大小 - http://davidwalsh.name/textarea-resize – Tasos 2014-09-23 12:23:31

随着数据表设置列像这样

$('#example').dataTable({ 
    "columns": [ 
    { "width": "20%" }, 
    null, 
    null, 
    null, 
    null 
    ] 
});

其中设置第一列的宽度并保持其他列汽车。如果您在初始化后执行宽度更改，则可能需要在更改宽度后重新绘制表格。

$('#example').DataTable().columns.adjust().draw();

来源

2014-09-23 12:24:16 DGS

我希望用户有能力在运行时调整列的大小。看起来你正在建议通过代码调整列宽。 – SharpCoder 2014-09-23 12:26:17

您正在使用jQuery插件，这意味着你已经是javascript了。我向您展示的这段代码只是您自定义数据表插件的方式，以您想要的方式工作 – DGS 2014-09-23 12:28:28

感谢您的快速回复。但是我仍然不确定，在调整列大小时，我可以如何使用您分享的代码作为我的优势？ – SharpCoder 2014-09-23 12:30:14

如何使用JavaScript/Jquery调整跨两个HTML表格的表列的大小

回答

相关问题