js实现table用鼠标改变td的宽度，固定table宽度和高度超过显示点

要实现这个功能，你可以使用JavaScript和CSS来改变table和td元素的样式。

首先，在HTML中，你需要定义一个具有固定宽度和高度的table元素，并在其中添加一些td元素。例如：

<style>
    #myTable {
        width: 500px;
        height: 300px;
        border-collapse: collapse;
    }
    #myTable td {
        border: 1px solid black;
        width: 100px;
        height: 50px;
    }
</style>

<table id="myTable">
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
    </tr>
    <tr>
        <td>Cell 4</td>
        <td>Cell 5</td>
        <td>Cell 6</td>
    </tr>
</table>

接下来，你可以使用JavaScript来实现改变td元素的宽度。例如，你可以给每个td元素添加一个mousedown事件监听器，当用户按下鼠标时，将其宽度设置为用户拖动鼠标时的距离。然后，你可以将mousemove和mouseup事件监听器添加到整个文档中，以便在用户拖动鼠标时调整宽度，并在用户释放鼠标时停止调整。

var table = document.getElementById("myTable");
var resizing = false;
var start = undefined;
var startX = undefined;

table.addEventListener("mousedown", function(event) {
    if (event.target.tagName.toLowerCase() === "td") {
        resizing = true;
        start = event.target;
        startX = event.pageX;
    }
});

document.addEventListener("mousemove", function(event) {
    if (resizing) {
        var diff = event.pageX - startX;
        start.style.width = start.offsetWidth + diff + "px";
        startX = event.pageX;
    }
});

document.addEventListener("mouseup", function(event) {
    resizing = false;
    start = undefined;
    startX = undefined;
});

最后，如果你想要固定table的宽度和高度，并在内容超出显示范围时添加滚动条，你可以将table元素包装在一个具有固定宽度和高度的div元素中，并将div元素的overflow属性设置为auto或scroll。

<div style="width: 500px; height: 300px; overflow: auto;">
    <table id="myTable">
        ...
    </table>
</div>