我正在处理一张表格，其中一个要求是每一行在悬停时变为粗体。我可以正常工作，但是当发生这种情况时，列的宽度会发生变化。
有什么办法可以防止这种情况发生吗？
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>
具体来说，它将鼠标悬停时第二列的内容向右移动。向下滚动表格时，结果看起来不太好。
关键是提前为粗体文本预留空间。
换句话说，当该行悬停时，文本会变为粗体，这会导致表格单元格变宽。但是，如果每个表格单元格从一开始（即悬停之前）就将粗体文本考虑在内，那么无论字体粗细如何，宽度都将保持稳定。
在这个答案中，表格单元格的内容被复制到title属性 https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title，然后使用该内容创建粗体但不可见的版本::after https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Aafter伪元素。
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;
}
<table>
<tr>
<td title="Cell One">Cell One</td>
<td title="Cell Two">Cell Two</td>
</tr>
</table>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
