Html 当内容在悬停时变为粗体时防止表扩展

我在一张桌子上工作，其中一个要求是每行在悬停时变为粗体。我有这个工作，但列的宽度移动时，发生这种情况

有什么办法可以防止这种情况发生吗

表格{
宽度：100%；
边框：1px实心#ccc；
边际上限：0；
边界间距：5px；
边界塌陷：分离；
}
表tr：悬停{
字号：600；
}

第一单元
第二单元

关键是提前为粗体文本预留空间

换句话说，当行悬停时，文本变为粗体，这会导致表格单元格变宽。但是，如果每个表格单元格从一开始（即悬停之前）就以粗体文本表示，则无论字体大小，宽度都将保持稳定

在这个答案中，表单元格的内容在中复制，然后使用pseudo元素创建粗体但不可见的内容版本

HTML

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

演示：

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;
}