Question

我正在努力使一个单元格全部可点击，但由于某种原因，只有一半的盒子是可点击的而顶部不是。这是我的代码：

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td {
  border: 1px solid #dddddd;
  padding: 30px;
  width: 20px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.ServerTable .Cell {
  padding: 10px;
  width: 80px;
  cursor: pointer;
}

.Cell:hover {
  background-color: deepskyblue;
}

.Cell a {
  display: block;
  width: 100%;
  height: 100%;
}

<td align="center" class="Cell">
  <a href="@Url.Action(Controller.ACTION_GROUP_MAIN, Controller.NAME, new GroupMainPageViewModel(_Node.ProbeNodeID, _Group.ID))">
    <font color="blue">Details</font>
  </a>
</td>

任何帮助都会很棒，因为我现在已经检查了很长时间了，并且找不到为什么会发生这种情况。

Answer 1

td上的填充占据了大部分空间，只为a留下了一条细长的可点击区域。要使整个td可点击，请将填充移至a，而不是td。

＆＃13;

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td {
  border: 1px solid #dddddd;
  width: 20px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.ServerTable .Cell {
  padding: 10px;
  width: 80px;
  cursor: pointer;
}

.Cell:hover {
  background-color: deepskyblue;
}

.Cell a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 30px;
}

＆＃13;

<table>
  <tr>
    <td align="center" class="Cell">
      <a href="@Url.Action(Controller.ACTION_GROUP_MAIN, Controller.NAME, new GroupMainPageViewModel(_Node.ProbeNodeID, _Group.ID))">
        <font color="blue">Details</font>
      </a>
    </td>
  </tr>
</table>

＆＃13;

或者，您可以使用position: absolute使a占据整个td，然后使用display: flex; justify-content: center; align-items: center;将文字置于链接中心。

＆＃13;

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td {
  border: 1px solid #dddddd;
  padding: 30px;
  width: 20px;
  position: relative;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.ServerTable .Cell {
  padding: 10px;
  width: 80px;
  cursor: pointer;
}

.Cell:hover {
  background-color: deepskyblue;
}

.Cell a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

＆＃13;

<table>
  <tr>
    <td align="center" class="Cell">
      <a href="@Url.Action(Controller.ACTION_GROUP_MAIN, Controller.NAME, new GroupMainPageViewModel(_Node.ProbeNodeID, _Group.ID))">
        <font color="blue">Details</font>
      </a>
    </td>
  </tr>
</table>

＆＃13;

Answer 2

原因是padding: 30px;上的td。将其设置为0并将该填充分配给a标记：

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td {
  border: 1px solid #dddddd;
  padding: 0px;
  width: 20px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.ServerTable .Cell {
  padding: 10px;
  width: 80px;
  cursor: pointer;
}

.Cell:hover {
  background-color: deepskyblue;
}

.Cell a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 30px;
}

<table>
<td align="center" class="Cell">
  <a href="@Url.Action(Controller.ACTION_GROUP_MAIN, Controller.NAME, new GroupMainPageViewModel(_Node.ProbeNodeID, _Group.ID))">
    <font color="blue">Details</font>
  </a>
</td>
</table>

制作表格单元格所有可点击的Css

2 个答案: