他の表要素を移動せずに枠線の幅を変更する

Question

クリックすると境界線の幅が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?を見ましたが、これらのどれも役に立ちました。私はまたボックスサイズとアウトラインプロパティを試して、どちらも動作していません。私はこの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を持っています。 border-widthがテーブル内の他の要素に影響を与えないように、どうすればいいですか？

Answer 1

ボーダーサイズの差に等しいパディングをテーブルセルに追加します。

最大の罫線幅が3pxになる場合、ボタンが選択されていない場合、表のセルの詰め物は2pxになり、ボタンの罫線は1pxになります。ボタンが選択されると、表のセルは、0のパディングを持ち、ボタンの境界は3pxになります。

このようにして、ボタンを選択しても目に見える変更は行われません。