當內容在懸停時變得粗體時，防止表格被展開

我在一張桌子上工作，其中一項要求是讓每一行在懸停時變得粗體。我有這個工作，但是當這種情況發生時，列的寬度會發生變化。當內容在懸停時變得粗體時，防止表格被展開

有沒有辦法可以防止這種情況？

table { 
 
    width: 100%; 
 
    border: 1px solid #ccc; 
 
    margin-top: 0; 
 
    border-spacing: 5px; 
 
    border-collapse: separate; 
 
} 
 

 
table tr:hover { 
 
    font-weight: 600; 
 
}

<table> 
 
    <tr> 
 
     <td>Cell One</td> 
 
     <td>Cell Two</td> 
 
     </tr> 
 

 
</table>

具體而言，移位第二列的內容到懸停的權利。在向下滾動桌面時，這看起來不太好看。

來源

2015-11-03 Vecta

關鍵是預先爲粗體文本預留空間。

換句話說，當這個行被徘徊時，文本變成粗體，這會導致一個更寬的表格單元格。但是，如果每個表格單元格都從一開始就以粗體文本爲參數（即懸停之前），那麼無論字體權重如何，寬度都將保持穩定。

在此答案中，表格單元格的內容將複製到title attribute中，然後使用該元素使用::after僞元素創建粗體但不可見的內容版本。

HTML

<table> 
    <tr> 
     <td title="Cell One">Cell One</td> 
     <td title="Cell Two">Cell Two</td> 
    </tr> 
</table>

CSS

table { 
    width: 100%; 
    border: 1px solid #ccc; 
    margin-top: 0; 
    border-spacing: 5px; 
    border-collapse: separate; 
} 

table tr:hover { 
    font-weight: 600; 
} 

/* new */ 
td::after {  
    display: block; 
    content:attr(title); 
    font-weight: 600; 
    color: transparent; 
    height: 1px; 
    margin-bottom: -1px; 
    visibility: hidden; 
    overflow: hidden; 
}

DEMO：http://jsfiddle.net/69ku6rj4/

來源

2015-11-03 04:29:00

當內容在懸停時變得粗體時，防止表格被展開

回答

相關問題