<table>
<tbody>
<tr>
<td><a href="#" class="row-link">One</a></td>
<td><a href="#" tabindex="-1" class="row-link">Two</a></td>
<td><a href="#" tabindex="-1" class="row-link">Three</a></td>
<td><a href="#" tabindex="-1" class="row-link">Four</a></td>
</tr>
<tr>
<td><a href="#" class="row-link">One</a></td>
<td><a href="#" tabindex="-1" class="row-link">Two</a></td>
<td><a href="#" tabindex="-1" class="row-link">Three</a></td>
<td><a href="#" tabindex="-1" class="row-link">Four</a></td>
</tr>
<tr>
<td><a href="#" class="row-link">One</a></td>
<td><a href="#" tabindex="-1" class="row-link">Two</a></td>
<td><a href="#" tabindex="-1" class="row-link">Three</a></td>
<td><a href="#" tabindex="-1" class="row-link">Four</a></td>
</tr>
</tbody>
</table>
body {
display: flex;
justify-content: center;
margin-top: 20px;
color: #37559d;
}
a {
color: #5165ff;
}
table {
border-collapse: collapse;
}
td {
border: 2px solid #ccd2ff;
position: relative;
}
tr:hover,
tr:focus-within {
background: #f2f3ff;
outline: none;
}
td > a:first-child {
display: flex;
padding: 18px;
text-decoration: none;
color: inherit;
z-index: 0;
&:focus {
outline: 0;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.