a：链接不填充整个td框

Question

我有一张桌子，我希望每个单元格都可以点击。这有点工作，但似乎链接没有填充整个框，当我应用某人点击太靠近边缘的悬停效果时，这就成了一个问题。有什么方法可以解决这个问题吗？

这是我的css

.dashboardMods td a {
  display: block;
  height:100%;
  width:100%;
}

.dashboardMods td:hover{
  background-color:#4297c2;
}

Answer 1

你的.dashboardMods td可能会有一个填充，这会阻止内部元素增大到width - (padding * 2)，因为填充是在两边。

此外，height: 100%并不总是有效，具体取决于浏览器和HTML规范（quirksmode）

Answer 2

从padding移除<td>。相反，您可以将相同的填充添加到<a>以获得类似的效果。只是为了确定你也可以.dashboardMods a:hover而不是更改bg。

Answer 3

试试这个：

.dashboardMods td{
  padding:0;
}
.dashboardMods td a{
  display: block;
  height:100%;
  width:100%;
  padding:0;
  margin:0;
  line-height:100%;
}