のプロパティ：ホバーテーブルの行が前の：ホバーの状態に復帰しない

Question

2pxのボーダーでホバー上のテーブルの行を強調表示しようとしています。セルがシフトするのを防ぐため、選択されていない場合には4pxのパディングが、ホバリングされない場合は2pxのボーダーと2pxのパディング、選択された場合は4pxのボーダーが与えられます。

このコードはJS Fiddleにありますか、または下に貼り付けられています。

<table> 
    <tr> 
    <td></td> 
    <td colspan="2">Header 1</td> 
    <td colspan="2">Header 2</td> 
    </tr> 
    <tr> 
    <td></td> 
    <td>Subheader 1.1</td> 
    <td>Subheader 1.2</td> 
    <td>Subheader 2.1</td> 
    <td>Subheader 2.2</td> 
    </tr> 
    <tr class="selected"> 
    <td>Row 1</td> 
    <td >10.1</td> 
    <td >10.6</td> 
    <td >9.1</td> 
    <td >9.4</td> 
    </tr> 
    <tr class="notselected"> 
    <td>Row 2</td> 
    <td>12.9</td> 
    <td>11.3</td> 
    <td>10.1</td> 
    <td>10.5</td> 
    </tr> 
    <tr class="notselected"> 
    <td>Row 3</td> 
    <td></td> 
    <td></td> 
    <td>8.7</td> 
    <td>8.8</td> 
    </tr> 
    <tr class="notselected"> 
</table> 

代わりの静的残り

td { 
    padding: 6px 10px; 
    text-align: center; 
    border-bottom: 1px solid #E1E1E1; 
    font-size: 1.3rem; } 

table { 
    border-collapse: collapse; 
} 

tr { 
    padding: 4px; 
} 
tr.selected { 
    border: 4px solid black; } 
tr.selected td:first-child { 
    padding-left : 8px; } 
tr.selected td:last-child { 
    padding-right : 8px; } 

tr.notselected { 
    border: 0px solid black; 
    padding: 4px;} 

tr.notselected:hover td:first-child { 
    padding-left : 9px; } 
tr.notselected:hover td:last-child { 
    padding-right : 9px; } 
tr.notselected:hover { 
    border: 2px solid black; 
    padding: 2px; } 

は、国境やホバー行の下の行の内容が行の後にダウンシフトが非ホバーあるまま、シフトダウンが、上の第二ホバー後に戻ってシフトアップホバーオフ。

Answer 1

ボーダー/パディングの代わりにCSSアウトラインを使用すると、このような行の移動を防ぐ必要があります。fork of your Fiddle。

outline: 2px solid black;