html - 当内容在悬停时变为粗体时防止表格展开

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 attribute 中，然后使用 ::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>