更改边框宽度而不移动其他表格元素

Question

我有一个按钮表，单击时将其边框宽度从1px增加到3px。 我看过Javascript-在不移动周围元素的情况下更改边框宽度。 ， 不影响边框宽度更改上其他元素的位置，以及如何在DIV中添加填充或边框并保持宽度和高度？ 但是这些都没有帮助。 我也尝试了box-sizing和outline属性，但都没有用。 我有这个Javascript：

function cur(curval) {
    if (!prevElement) {
      prevElement = document.getElementById(curval);
      currentElement = prevElement;
    } else {
      prevElement = currentElement;
      prevElement.style.borderWidth = "1px"
      currentElement = document.getElementById(curval);
    }
    currentElement.style.borderWidth = "3px"
    document.body.style.cursor = curval;
}

这是表格的一部分：

<tr>
    <td><button id="default" onclick="cur('default')"><img 
    src="default.png"/></button></td>
    <td><button id="alias" onclick="cur('alias')"><img src="alais.png"/>
    </button></td>
    <td><button id="cell" onclick="cur('cell')"><img src="cell.png"/>
    </button></td>
    <td><button id="col-resize" onclick="cur('col-resize')"><img src="col-
    resize.png"/></button></td>
    <td><button id="copy" onclick="cur('copy')"><img src="copy.png"/>
    </button></td>
    <td><button id="crosshair" onclick="cur('crosshair')"><img 
    src="crosshairs.png"/></button></td>
</tr>

所有按钮都有border: 1px solid black直到单击它们为止。 我怎样才能使边框宽度不影响表中的其他元素？

Answer 1

向表格单元格添加等于边框大小差异的填充。

因此，如果最大边框宽度将为3px ，则在未选择按钮的情况下，表格单元格的填充应为2px而按钮的边框应为1px 。 选择按钮后，表格单元格的填充应为0 ，按钮的边框应为3px 。

以这种方式，选择按钮时将不会进行任何可见的更改。