テーブルセルをすべてクリック可能にするCss

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全体をクリック可能にするには、tdではなく、aにパディングを移動します。また

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>

、あなたは a全体 tdを占有するために position: absoluteを使用することができ、その後、リンク内のテキストを中央に display: flex; justify-content: center; align-items: center;を使用しています。

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

理由はtdであなたのpadding: 30px;です。 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>