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

Question

我正在处理一张表格，其中一个要求是每一行在悬停时变为粗体。我可以正常工作，但是当发生这种情况时，列的宽度会发生变化。

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

 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>

具体来说，它将鼠标悬停时第二列的内容向右移动。向下滚动表格时，结果看起来不太好。

Answer 1

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

换句话说，当该行悬停时，文本会变为粗体，这会导致表格单元格变宽。但是，如果每个表格单元格从一开始（即悬停之前）就将粗体文本考虑在内，那么无论字体粗细如何，宽度都将保持稳定。

在此答案中，表格单元格的内容在title属性::after中复制，然后使用伪元素创建粗体但不可见的内容版本。

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>