How to design this table using html

Question

I have a requirement to design a table like an above image.

Please help me anybody or have any ideas to design this table.

Thanks, Ashraf

Answer 1

You can mark up the table as normal, but place it inside a custom-table <div>. The custom-table <div> contains four custom-border <div>s which, given a higher z-index, each overlap the outermost cells of the original table.

table {
position: absolute;
top: 0px;
left: 0px;
border-collapse: collapse;
margin: 0;
}

td {
width: 50px;
height: 38px;
border:1px solid rgba(127,127,127,1);
text-align: center;
}

.custom-table {
position: relative;
display:inline-block;
width: 160px;
height: 206px;
}

.custom-border {
position: absolute;
z-index: 12;
margin: 0;
padding: 0;	
background-color: rgba(255,255,255,1);
}

.horizontal {
width: 160px;
height: 30px;
}

.vertical {
display: inline-block;
width: 20px;
height: 206px;
}

.custom-border:nth-of-type(-n+2) {
top: 0;
left: 0;
}

.custom-border:nth-of-type(3) {
top: 0;
right: 0;
}

.custom-border:nth-of-type(4) {
bottom: 0;
left: 0;
}

<div class="custom-table">

<div class="custom-border horizontal"></div>
<div class="custom-border vertical"></div>

<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td>3</td>
<td>3</td>
<td></td>
</tr>

<tr>
<td></td>
<td>4</td>
<td>4</td>
<td></td>
</tr>

<tr>
<td></td>
<td>5</td>
<td>5</td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

</table>

<div class="custom-border vertical"></div>
<div class="custom-border horizontal"></div>

</div>