在不移动其他表格元素的情况下更改边框宽度答案

【问题标题】：Change border width without moving other table elements在不移动其他表格元素的情况下更改边框宽度
【发布时间】：2017-11-14 08:17:51
【问题描述】：

我有一个按钮表，当单击这些按钮时，它们的边框宽度从 1 像素增加到 3 像素。我看过Javascript - Changing border-width without moving surrounding elements.、Don't affect positioning of other elements on border-width changes 和How to add padding or border to a DIV and keep width and height?，但这些都没有帮助。我也尝试了 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，直到它们被点击。我怎样才能做到让边框宽度不影响表格中的其他元素？

【问题讨论】：

请同时显示相关的 HTML。
HTML 请????

标签： javascript html

【解决方案1】：

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

因此，如果最大边框宽度将是3px，则当未选择按钮时，您的表格单元格应具有2px 的填充，并且您的按钮应具有1px 的边框。选择按钮后，表格单元格的填充应为0，按钮的边框应为3px。

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

【讨论】：