<table class="mytable">
<tr>
<td colspan="2" rowspan="2">abfg</td>
<td class="t1" rowspan="2">ch</td>
<td colspan="2">de</td>
</tr>
<tr>
<td>i</td>
<td class="hideborder">j</td>
</tr>
<tr>
<td class="t1" colspan="5">klmno</td>
</tr>
<tr>
<td colspan="2">pq</td>
<td class="t1" rowspan="2">rw</td>
<td>s</td>
<td rowspan="2">ty</td>
</tr>
<tr>
<td class="hideborder2">u</td>
<td>v</td>
<td>x</td>
</tr>
</table>
body {
font-family:Verdana, Geneva, sans-serif;
}
h1 {
text-align:center;
}
.mytable {
width:500px;
height:500px;
margin:auto;
border:1px solid #000;
border-spacing:5px;
table-layout:fixed;
}
.mytable td {
border:1px solid #000;
}
.t1, #t1 {
visibility:hidden;
}
td.hideborder {
border-top:none;
position:relative;
}
.hideborder:after {
content:"";
position:absolute;
height:6px;
left:-1px;
right:-1px;
top:-6px;
background:#fff;
border-left:1px solid #000;
border-right:1px solid #000;
}
td.hideborder2 {
border-right:none;
position:relative;
}
.hideborder2:after {
content:"";
position:absolute;
right:-6px;
width:6px;
top:-1px;
bottom:-1px;
background:#fff;
border-top:1px solid #000;
border-bottom:1px solid #000;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.