JSFiddle - React, Tailwind, and code Playground
by Shashank D
HTML
<table class="table">
<tbody>
<tr>
<td rowspan="2" colspan="1" style="text-align:center;">A</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="3" style="text-align:center;">B</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="4" style="text-align:center;">C</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="1" style="text-align:center;">D</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>CSS
table {
border-spacing: 0;
border-collapse: collapse;
}
tr, td {
border: 1px solid #000;
}
td { width: 20px; height:20px; padding: 0;margin: 0}JavaScript
$('table.table td').each(function () {
var rowspan = +$(this).attr('rowspan'),
index = $(this).parent().index();
if(rowspan) {
// apply red top border to table row consisting of rowspan td
$('table.table tr:nth-child('+(index+1)+')').css('border-top', '2px solid red');
// apply red bottom border to table row based on index and rowspan count
$('table.table tr:nth-child('+(index+rowspan)+')').css('border-bottom', '2px solid red');
// for left and right borders, go through the rows from index upto the count of rowspan
for(var i=index; i < index+rowspan; i++) {
$('table.table tr:nth-child('+(i+1)+')').css('border-right', '2px solid red');
$('table.table tr:nth-child('+(i+1)+')').css('border-left', '2px solid red');
}
}
});