<table>
<tbody>
<tr id="row-1">
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>
<a href="#link">Link</a>
</td>
</tr>
<tr id="row-2">
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>
<a href="#link">Link</a>
</td>
</tr>
<tr id="row-3">
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>
<a href="#link">Link</a>
</td>
</tr>
</tbody>
</table>
body {
display: flex;
justify-content: center;
margin-top: 20px;
color: #37559d;
}
a {
color: #5165ff;
}
table {
border-collapse: collapse;
}
tr:hover {
background: #f2f3ff;
outline: none;
cursor: pointer;
}
td {
border: 2px solid #ccd2ff;
position: relative;
padding: 18px;
}
View Compiled
let isCommandPressed = false;
window.addEventListener("keydown", (event) => {
if (event.which === 91) {
isCommandPressed = true;
}
});
window.addEventListener("keyup", (event) => {
if (event.which === 91) {
isCommandPressed = false;
}
});
for (let i = 1; i <= 3; i++) {
const row = document.getElementById(`row-${i}`);
row.addEventListener("click", () => {
if (isCommandPressed) {
window.open(`/row-${i}`, "_blank");
} else {
window.location.href = `/row-${i}`;
}
});
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.