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

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; 
}