<div class="table">
<a class="tableRow" href="#1">
<div class="tableCell">One</div>
<div class="tableCell">Two</div>
<div class="tableCell">Three</div>
<div class="tableCell">Four</div>
</a>
<a class="tableRow" href="#2">
<div class="tableCell">One</div>
<div class="tableCell">Two</div>
<div class="tableCell">Three</div>
<div class="tableCell">Four</div>
</a>
<a class="tableRow" href="#3">
<div class="tableCell">One</div>
<div class="tableCell">Two</div>
<div class="tableCell">Three</div>
<div class="tableCell">Four</div>
</a>
</div>
body {
display: flex;
justify-content: center;
margin-top: 40px;
}
table {
border: 2px solid blueviolet;
border-collapse: collapse;
}
body {
display: flex;
justify-content: center;
margin-top: 20px;
color: #37559d;
}
a {
color: #5165ff;
}
.tableRow {
display: grid;
text-decoration: none;
color: inherit;
grid-template-columns: repeat(4, 70px);
place-items: center;
border: 2px solid #ccd2ff;
border-bottom: none;
cursor: pointer;
&:hover,
&:focus {
background: #f2f3ff;
outline: none;
}
&:last-child {
border-bottom: 2px solid #ccd2ff;
}
}
.tableCell {
padding: 18px;
border-right: 2px solid #ccd2ff;
&:last-child {
border-right: none;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.