在大表中调整表列的大小

Resizing table columns in a big table

本文关键字：调整      更新时间：2023-09-26

我正在寻找一种简单的方法来使我的表列重新调整大小。由于我的表有很多列，页面必须有一个滚动条。这似乎使所有用于调整大小的代码都不起作用。我已经尝试了我自己的代码和几个插件，但它从来没有工作。

jsfiddle with a plugin

jsfiddle没有插件，但仍然不能工作

我使用的是我在so中找到的代码:

$(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;
        }
    });
});

你的问题是表格的宽度。

尝试设置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;
}
相关文章：