当内容在悬停时变得粗体时，防止表格被展开

我在一张桌子上工作，其中一项要求是让每一行在悬停时变得粗体。我有这个工作，但是当这种情况发生时，列的宽度会发生变化。当内容在悬停时变得粗体时，防止表格被展开

有没有办法可以防止这种情况？

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

当内容在悬停时变得粗体时，防止表格被展开

回答

相关问题