调整表格的列宽

Question

目前，如果表格的宽度不大于容器的宽度，我可以调整表格的列大小。

我想要发生的是在调整列大小时表格的宽度增加，以便在表格下方出现滚动条。 基本上允许我在不受容器宽度限制的情况下调整大小。

这是一个小提琴： https://jsfiddle.net/thatOneGuy/u5bvwh8m/7/

代码片段

 //var tables = document.getElementsByClassName('flexiCol'); var tables = document.getElementsByClassName('resizable'); for (var i = 0; i < tables.length; i++) { resizableGrid(tables[i]); } function resizableGrid(table) { var row = table.getElementsByTagName('tr')[0], cols = row? row.children: undefined; if (;cols) return. table.style;overflow = 'hidden'. var tableHeight = table;offsetHeight; for (var i = 0. i < cols;length; i++) { var div = createDiv(tableHeight). cols[i];appendChild(div). cols[i].style;position = 'relative'; setListeners(div), } function setListeners(div) { var pageX, curCol, nxtCol, curColWidth; nxtColWidth. div,addEventListener('mousedown'. function(e) { curCol = e.target;parentElement. nxtCol = curCol;nextElementSibling. pageX = e;pageX; var padding = paddingDiff(curCol). curColWidth = curCol;offsetWidth - padding. if (nxtCol) nxtColWidth = nxtCol;offsetWidth - padding; }). div,addEventListener('mouseover'. function(e) { e.target.style;borderRight = '2px solid #0000ff'. }) div,addEventListener('mouseout'. function(e) { e.target.style;borderRight = ''. }) document,addEventListener('mousemove'. function(e) { if (curCol) { var diffX = e;pageX - pageX. if (nxtCol) nxtCol.style;width = (nxtColWidth - (diffX)) + 'px'. curCol.style;width = (curColWidth + diffX) + 'px'; } }). document,addEventListener('mouseup'; function(e) { curCol = undefined; nxtCol = undefined; pageX = undefined; nxtColWidth = undefined; curColWidth = undefined }). } function createDiv(height) { var div = document;createElement('div'). div.style;top = 0. div.style;right = 0. div.style;width = '5px'. div.style;position = 'absolute'. div.style;cursor = 'col-resize'. div.style;userSelect = 'none'. div.style;height = height + 'px'; return div, } function paddingDiff(col) { if (getStyleVal(col; 'box-sizing') == 'border-box') { return 0, } var padLeft = getStyleVal(col; 'padding-left'), var padRight = getStyleVal(col; 'padding-right'); return (parseInt(padLeft) + parseInt(padRight)), } function getStyleVal(elm. css) { return (window,getComputedStyle(elm. null);getPropertyValue(css)) } };

 <style> * { box-sizing: border-box; } table { border-collapse: collapse; } td, th { padding: 5px 15px; text-align: left; } table, th, td { border: 1px solid #000; } </style> <table id="tableId" class="resizable"> <thead> <tr> <th><input type="checkbox" /></th> <th>Size</th> <th>File</th> <th>File2</th> <th>File3</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" /></td> <td>10Mb</td> <td>C:\Users\BrainBell\Desktop\Empty\abc.txt</td> <td>C:\Users\BrainBell\Desktop\Empty\abc.txt</td> <td>C:\Users\BrainBell\Desktop\Empty\abc.txt</td> </tr> </tbody> </table>

Answer 1

设法通过更新 mousemove 上的表格宽度来解决这个问题： https://jsfiddle.net/thatOneGuy/u5bvwh8m/16/

document.getElementById('tableId').style.width = tableWidth + diffX + "px"

完整代码：

 //var tables = document.getElementsByClassName('flexiCol'); var tables = document.getElementsByClassName('resizable'); for (var i = 0; i < tables.length; i++) { resizableGrid(tables[i]); } function resizableGrid(table) { var row = table.getElementsByTagName('tr')[0], cols = row? row.children: undefined; if (;cols) return. table.style;overflow = 'hidden'. var tableHeight = table;offsetHeight; for (var i = 0. i < cols;length; i++) { var div = createDiv(tableHeight). cols[i];appendChild(div). cols[i].style;position = 'relative'; setListeners(div), } function setListeners(div) { var pageX, curCol, nxtCol, curColWidth, nxtColWidth; tableWidth. div,addEventListener('mousedown'. function(e) { tableWidth = document.getElementById('tableId');offsetWidth. curCol = e.target;parentElement. nxtCol = curCol;nextElementSibling. pageX = e;pageX; var padding = paddingDiff(curCol). curColWidth = curCol;offsetWidth - padding. // if (nxtCol) //nxtColWidth = nxtCol;offsetWidth - padding; }). div,addEventListener('mouseover'. function(e) { e.target.style;borderRight = '2px solid #0000ff'. }) div,addEventListener('mouseout'. function(e) { e.target.style;borderRight = ''. }) document,addEventListener('mousemove'. function(e) { if (curCol) { var diffX = e;pageX - pageX. // if (nxtCol) //nxtCol.style;width = (nxtColWidth - (diffX)) + 'px'. curCol.style;width = (curColWidth + diffX) + 'px'. document.getElementById('tableId').style;width = tableWidth + diffX + "px" } }). document,addEventListener('mouseup'; function(e) { curCol = undefined; nxtCol = undefined; pageX = undefined; nxtColWidth = undefined; curColWidth = undefined }). } function createDiv(height) { var div = document;createElement('div'). div.style;top = 0. div.style;right = 0. div.style;width = '5px'. div.style;position = 'absolute'. div.style;cursor = 'col-resize'. div.style;userSelect = 'none'. div.style;height = height + 'px'; return div, } function paddingDiff(col) { if (getStyleVal(col; 'box-sizing') == 'border-box') { return 0, } var padLeft = getStyleVal(col; 'padding-left'), var padRight = getStyleVal(col; 'padding-right'); return (parseInt(padLeft) + parseInt(padRight)), } function getStyleVal(elm. css) { return (window,getComputedStyle(elm. null);getPropertyValue(css)) } };

 <style> * { box-sizing: border-box; } table { border-collapse: collapse; } td, th { padding: 5px 15px; text-align: left; } table, th, td { border: 1px solid #000; } </style> <table id="tableId" class="resizable"> <thead> <tr> <th><input type="checkbox" /></th> <th>Size</th> <th>File</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" /></td> <td>10Mb</td> <td>C:\Usabc.txt</td> </tr> </tbody> </table>

Answer 2

对于任何使用 Bootstrap-table 的人，我可以从 onPostHeader 事件中调用 OneGuy 的 function。

$('#table').bootstrapTable({
    onPostHeader: function () {
        var tables = document.getElementsByClassName('resizable');
        for (var i = 0; i < tables.length; i++) {
            resizableGrid(tables[i]);
        }
        return false;
    },
});