在大表格中調整表格列的大小

Question

我正在尋找一種簡單的方法來使表格列的大小可變。 由於我的表格有很多列，頁面必須有一個滾動條。這似乎使所有的大小調整代碼不起作用。我試過我自己的代碼和幾個插件，但它從來沒有工作。

jsfiddle與插件

jsfiddle無插件，但

我使用這個代碼，我發現這裏靜得沒有工作：

$(function() { 
    var pressed = false; 
    var start = undefined; 
    var startX, startWidth; 

    $("table th").mousedown(function(e) { 
     start = $(this); 
     pressed = true; 
     startX = e.pageX; 
     startWidth = $(this).width(); 
     $(start).addClass("resizing"); 
     $(start).addClass("noSelect"); 
    }); 

    $(document).mousemove(function(e) { 
     if(pressed) { 
      $(start).width(startWidth+(e.pageX-startX)); 
     } 
    }); 

    $(document).mouseup(function() { 
     if(pressed) { 
      $(start).removeClass("resizing"); 
      $(start).removeClass("noSelect"); 
      pressed = false; 
     } 
    }); 
}); 

Answer 1

你的問題是表格的寬度。

嘗試設置width:200%;表。如果你想後，您可以設置overflow:scroll;

小提琴更新http://jsfiddle.net/Mz2HN/

我只編輯CSS

table { 
    border-width: 1px; 
    border-style: solid; 
    border-color: black; 
    border-collapse: collapse; 
    width:200%; 
    overflow:scroll; 
} 

table td { 
    border-width: 1px; 
    border-style: solid; 
    border-color: black; 
} 

table th { 
    border: 1px; 
    border-style: solid; 
    border-color: black; 
    background-color: green; 
    cursor: col-resize; 
} 

table th.resizing { 
    cursor: col-resize; 
} 

.noSelect { 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
}