悬停时CSS / HTML表格宽度发生变化

Question

我正在尝试在CSS上创建表格样式。事实是，表格宽度是根据表格中文本所需的必要空间自动设置的，这很好。问题是我在行上设置了悬停效果，使字体粗细设置为粗体。因此，它比以前占用更多的空间，因此表的宽度会发生变化。 我需要将表格宽度设置为如果我将鼠标悬停在最长的文本上可能需要的空间量。它与自动执行的功能本质上相同，但是考虑到字体在悬停时可能会加粗。 代码：

CSS：

:root{
    --table-color: #7570D4;
}
.blister-table{
    border-collapse: collapse;
    margin: 25px 0px;
    font-size: 0.9em;
    min-width: 400px;
}
.blister-table thead tr{
    background-color: var(--table-color);
    color: white;
    text-align: left;
    font-weight: bold;
}
.blister-table tbody tr{
    border-bottom: 1px solid #ccc;
}
.blister-table tbody tr:hover{
    font-weight: bold;
    color: var(--table-color);
    background-color: #ddd;
}