如何使html表格列可調整大小？

我有一個相當標準的bootstrap風格<table>。我想讓這個表的列可以調整大小，例如通過點擊並拖動<th>元素的右邊框。我無法使用任何jQuery插件，因爲我正在使用Angular，並且jQuery依賴關係是不可接受的。如何使html表格列可調整大小？

我在想，如果我可以捕捉到<th>元素的右邊框上的click/mousemove事件，我可以實現自己的調整大小邏輯（監視水平鼠標移動並相應地調整寬度），但我不知道如何這可以做到（據我所知，沒有元素邊界相關的事件）。

什麼是使用戶可以調整列大小的最佳方式？沒有jQuery（最好 - 在Angular 2上下文中）。

來源

2017-01-16 Titan

如果你想自己實現這個，你可能過於複雜了。

ag-grd是2角一個優秀的網格庫，處理所有預期表操作（調整大小，重新排序等）

您可以使用純JavaScript版本或AG-格角2從ag-grid-ng2

「AG-Grid組件是一個企業級的Javascript數據網格。AG-網的目的是提供企業軟件可用於構建應用程序，如報告和數據分析，業務數據網格工作流程和數據錄入「

來源

2017-01-16 11:18:02

謝謝，但如果我想使用第三方網格，我不會在第一個地方發佈這個問題。 :)（P.S .:我不是downvoting無論如何你的答案） – Titan

resize財產不能與工作表中，這就是爲什麼你需要把一個div表th和td內，然後調整其大小，以試試下面片斷

table { 
 
    border-collapse: collapse; 
 
    border-spacing: 0px; 
 
} 
 
td { 
 
    border: 2px solid black; 
 
    padding: 0; 
 
    margin: 0px; 
 
    overflow: auto; 
 
} 
 

 
div { 
 
    resize: both; 
 
    overflow: auto; 
 
    width: 120px; 
 
    height: 120px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    border: 1px solid black; 
 
    display:block; 
 

 
} 
 

 
td div { 
 
    border: 0; 
 
    width: auto; 
 
    height: auto; 
 
    min-height: 20px; 
 
    min-width: 20px; 
 
}

<table> 
 
    <tr> 
 
    <td><div>one</div></td> 
 
    <td><div>two</div></td> 
 
    <td><div>three</div></td> 
 
    </tr> 
 
    <tr> 
 
    <td><div>four</div></td> 
 
    <td><div>five</div></td> 
 
    <td><div>six</div></td>   
 
    </tr> 
 
    <tr> 
 
    <td><div>seven</div></td> 
 
    <td><div>eight</div></td> 
 
    <td><div>nine</div></td>  
 
    </tr> 
 
</table>

來源

2017-01-16 11:22:42

這有助於。如何在調整大小後獲得新寬度？ –

如果你想知道新的寬度，那麼你需要使用jquery並獲得div的寬度，因爲新的寬度沒有定義 –

不要。改用bootstrap。讓bootstrap決定爲最終用戶調整大小。
- 調整列大小不會在設備上正常工作。 - 您最終可能會被迫記住服務器或瀏覽器中的列寬，這可能會導致大量工作。它會結束嗎？列應重新排序嗎？他們應該被刪除嗎？最好是做出一些設計選擇，而不是把所有東西都鏟回最終用戶。

來源

2017-01-16 13:11:59

如何使html表格列可調整大小？

回答

相關問題