Making Tischzelle alle anklickbar Css

Question

Ich versuche, eine Zelle alle anklickbar zu machen, aber aus irgendeinem Grund ist nur die Hälfte der Box klickbar und die Spitze ist nicht. Hier ist mein Code:

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>

Jede Hilfe wäre genial, da ich habe in dieser für ein ganz ein paar Stunden jetzt überprüft und nicht finden können, warum dies geschieht.

Answer 1

Die Polsterung auf der td besetzt den größten Teil des Raumes, nur einen schmalen Streifen anklickbarer Fläche für die a. Um die ganze td anklickbar zu machen, verschieben Sie die Polsterung in die a, nicht die td.

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; 
 
}

<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>

Alternativ können Sie position: absolute verwenden, um die a die gesamten td besetzen zu machen, dann display: flex; justify-content: center; align-items: center;, um den Text in dem Link zu zentrieren.

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; 
 
}

<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>

Answer 2

Der Grund ist Ihre padding: 30px; auf dem td. Stellen Sie, dass auf 0 und weisen diese Polsterung an den a-Tag statt:

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>