在“适合”模式下调整td标签的大小

Question

所以...嘿！ 我正在尝试在HTML表格中调整td标签的大小，而不会移动相邻的tds。

我正在使用静态HTML表和一些JavaScript函数。

我发现了这一点，就像他们在下面称其为“适合”模式一样： https://www.jqueryscript.net/demo/jQuery-Plugin-For-Draggable-Resizable-Table-Columns-colResizable/

JavaScript代码：

 var tables = document.getElementsByTagName('table');
 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 = '3px solid #ffa500';
  })

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

     console.log("pageX   "+ pageX)
     console.log("e.pageX  " + e.pageX)

   }
  });

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


export {
  resizableGrid
}

HTML标记：

<div class="table-responsive" *ngIf = "active" id="table-container"> 
  <table *ngFor = "let group of numGroup" id="table">
   <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
   </tbody> 
  </table> 
</div>

CSS配置：

#table-container {
    border-collapse: collapse;
    border-spacing: 0px;
    position: relative;
    margin: auto;
    padding: auto;
    margin-bottom: 10px;
    width: 1344px;
    min-width: 1344px;
    max-width: 1344px;
  }

  #table-container{
    overflow: auto;
  }

  td {
    border: 2px solid rgb(0, 0, 0);
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    width: 122px;
    height: 102px;
    min-width: 61px;
    position: relative;
  }
  td div {
    border: 0px;
    width: 122px;
    height: 102px;
    padding: 0;
    position: relative;
  }