tableResize

by flyingbee2012

HTML

<table id='mytable' style="border-collapse:collapse;">
  <tbody>
    <tr height="19" style="height:14.25pt">
      <td style="border:1px solid rgb(212, 212, 212);width:100px"></td>
      <td style="border:1px solid rgb(212, 212, 212);width:100px"></td>
      <td style="border:1px solid rgb(212, 212, 212);width:100px"></td>
    </tr>
  </tbody>
</table>
<br>
<button type="button" id="bnt">Hide Right Border</button>

JavaScript

function hideRightBorder() {  
  var table = document.getElementById("mytable");
  var w = [];
  for (var i = 0, row; row = table.rows[i]; i++) {
    for (var j = 0, col; col = row.cells[j]; j++) {
      var newWidth = col.getBoundingClientRect().right - col.getBoundingClientRect().left;
      //col.style.boxSizing = 'border-box';
      //col.style.width = newWidth.toString() + 'px';
      w.push(newWidth);
    }
  }
  
  for (var i = 0, row; row = table.rows[i]; i++) {
    for (var j = 0, col; col = row.cells[j]; j++) {
      col.style.boxSizing = 'border-box';
      col.style.width = w[j];
    }
  }

  
}


var theButton = document.getElementById("bnt");
theButton.onclick = hideRightBorder;