如何在html中使TR / TD不可移动？

Question

嗨我有几张tds和trs的桌子。我的一些tr在悬停时具有样式（更改背景颜色并将字体样式更改为粗体等）。面临的问题是，当我鼠标悬停/悬停时，字段按预期样式化，但td / tr列因为样式而移动或摇动。反正是为了防止这种情况发生？提前致谢。

以下是我的css，

.customCHTR:hover
{
  border: red;
  background-color:#e7e7e7;
  font-weight:bold;
}

Answer 1

定义td的边框大小并在其悬停时保持相同非常重要。您还应该向td添加width属性。这应该可以解决你的问题。

td {
  border: 2px solid #000;
  width: 50%;
}

.customCHTR:hover {
  border: 2px solid red;
  background-color: #e7e7e7;
  font-weight: bold;
}

Here's a fiddle所以你可以看到它的实际效果。希望有所帮助。