Bootstrap

表格列寬拖拉改變大小方法

使用外掛：colResizable.js 

外掛地址：http://www.bacubacu.com/colresizable/

特徵

colResizable的開發，因為沒有找到具有以下列出的功能的其他類似外掛：

相容滑鼠和觸控裝置（PC，平板電腦和手機）

相容百分比和基於畫素的表格佈局

列調整大小而不改變總表寬（可選）

無需外部資源（如影象或樣式表）

頁面重新整理或回發後的可選佈局永續性

柱錨的定製

佔地面積小

跨瀏覽器相容性（IE7 +，Chrome，Safari，Firefox） 

用法

• 要使用此外掛，必須在載入jQuery後將指令碼引用新增到文件head部分的colResizable.min.js檔案中。要增強表（或表的集合），請使用jQuery包裝器指向它並應用colResizable（）方法。
• 調整大小的夾點將根據其第一行佈局位於表中。因此，建議不要在這些單元格中使用colspan值。如果需要第一行中的colspan，只需在表標題之前新增一個額外的行，沒有高度，因此它將不可見。 
• 為了防止在調整列大小時出現奇怪的行為，強烈建議您使用寬度屬性，內聯樣式或css規則來定義表的寬度。 

<script src = "js/jquery.js" />
<script src = "js/colResizable.min.js" />

<script type="text/javascript">
    $(function(){
        $("table").colResizable();
    });
</script>
 

提供方法

拖動改變列寬大小，不改變表總體父容器寬度

拖動改變列寬大小，重新整理頁面後，仍然保持拖動後表格列寬大小

拖動改變列寬大小，表格總體父容器寬度將保持不變。拖拉改變表父容器大小，表格列寬將按百分比形式改變列寬度（相容畫素和基於百分比的佈局）

拖動改變列寬大小，列單獨擴充套件大小，改變表格總體父容器寬度

拖動改變列寬大小，列單獨擴充套件大小，改變表格總體父容器寬度，溢位時，顯示左右拖動條

其他：改變表格外觀，範圍滑塊等

具體細節：請到官網檢視

連結：https://www.linghangtech.com/ 領航科技-廣州網站建設，深圳網站建設，廣州小程式開發，深圳小程式開發，普寧做網站，網站建設，網站開發 本文原創，禁止私自轉載，轉載請聯絡本人並保留本文字。