如何在不調整大小的情況下在懸停時在TD元素周圍添加邊框

我想在懸停時在TD元素周圍添加邊框。如何在不調整大小的情況下在懸停時在TD元素周圍添加邊框

td:hover{border: 4px solid #dddddd;}

這增加了一個邊框，但調整了單元格的大小。如何防止調整大小？我試着添加額外的填充並在盤旋時扣除填充，但沒有給出所需的結果。

table { 
 
    font-family: arial, sans-serif; 
 
    border-collapse: collapse; 
 
    width: 400px; 
 
} 
 

 
td, th { 
 
    border: 1px solid #dddddd; 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 
td:hover{ 
 
    border: 4px solid #dddddd; 
 
}

<body> 
 

 
<table> 
 
    <tr> 
 
    <th>Company</th> 
 
    <th>Contact</th> 
 
    <th>Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Maria Anders</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Centro comercial Moctezuma</td> 
 
    <td>Francisco Chang</td> 
 
    <td>Mexico</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Ernst Handel</td> 
 
    <td>Roland Mendel</td> 
 
    <td>Austria</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Island Trading</td> 
 
    <td>Helen Bennett</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Laughing Bacchus Winecellars</td> 
 
    <td>Yoshi Tannamuri</td> 
 
    <td>Canada</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Magazzini Alimentari Riuniti</td> 
 
    <td>Giovanni Rovelli</td> 
 
    <td>Italy</td> 
 
    </tr> 
 
</table>

來源

2017-10-17 Dummy

使用outline而不是border。

table { 
 
    font-family: arial, sans-serif; 
 
    border-collapse: collapse; 
 
    width: 400px; 
 
} 
 

 
td, th { 
 
    border: 1px solid #dddddd; 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 
td:hover{ 
 
    outline: 4px solid #dddddd; 
 
}

<body> 
 

 
<table> 
 
    <tr> 
 
    <th>Company</th> 
 
    <th>Contact</th> 
 
    <th>Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Maria Anders</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Centro comercial Moctezuma</td> 
 
    <td>Francisco Chang</td> 
 
    <td>Mexico</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Ernst Handel</td> 
 
    <td>Roland Mendel</td> 
 
    <td>Austria</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Island Trading</td> 
 
    <td>Helen Bennett</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Laughing Bacchus Winecellars</td> 
 
    <td>Yoshi Tannamuri</td> 
 
    <td>Canada</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Magazzini Alimentari Riuniti</td> 
 
    <td>Giovanni Rovelli</td> 
 
    <td>Italy</td> 
 
    </tr> 
 
</table>

來源

2017-10-17 11:26:23

由於李斯特先生，這真是棒極了 – Dummy

我認爲這將解決您的問題 -

我已經使用position造成這種結果的CSS屬性。未使用outline屬性，因爲它會溢出您的td。

我已將此附加代碼添加到您的代碼段中。

td { 
     position: relative; 
    } 

td:after { 
     content: ''; 
     position: absolute; 
     left: 0; 
     right: 0; 
     top: 0; 
     bottom: 0; 
    } 

td:hover:after { 
     border: 4px solid #dddddd; 
    }

table { 
 
    font-family: arial, sans-serif; 
 
    border-collapse: collapse; 
 
    width: 400px; 
 
} 
 

 
td, 
 
th { 
 
    border: 1px solid #dddddd; 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 

 
td { 
 
    position: relative; 
 
} 
 

 
td:after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
} 
 

 
td:hover:after { 
 
    border: 4px solid #dddddd; 
 
}

<body> 
 

 
    <table> 
 
    <tr> 
 
     <th>Company</th> 
 
     <th>Contact</th> 
 
     <th>Country</th> 
 
    </tr> 
 
    <tr> 
 
     <td>Alfreds Futterkiste</td> 
 
     <td>Maria Anders</td> 
 
     <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Centro comercial Moctezuma</td> 
 
     <td>Francisco Chang</td> 
 
     <td>Mexico</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Ernst Handel</td> 
 
     <td>Roland Mendel</td> 
 
     <td>Austria</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Island Trading</td> 
 
     <td>Helen Bennett</td> 
 
     <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Laughing Bacchus Winecellars</td> 
 
     <td>Yoshi Tannamuri</td> 
 
     <td>Canada</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Magazzini Alimentari Riuniti</td> 
 
     <td>Giovanni Rovelli</td> 
 
     <td>Italy</td> 
 
    </tr> 
 
    </table>

來源

2017-10-17 11:26:13 weBBer

如何在不調整大小的情況下在懸停時在TD元素周圍添加邊框

回答

相關問題