如何使用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表格的表列的大小

回答

相關問題