JSFiddle - React, Tailwind, and code Playground
by Sean Clark
HTML
<table>
<thead>
<tr>
<th>Day</th>
<th>09-10</th>
<th>10-11</th>
<th>11-12</th>
<th>12-13</th>
<th>13-14</th>
<th>14-15</th>
<th>15-16</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>DA601</td>
<td>DA602</td>
<td>DA603</td>
<td></td>
<td></td>
<td>DA601 LAB</td>
<td></td>
</tr>
<tr>
<td>Tuesday</td>
<td>DA601</td>
<td>DA602 LAB</td>
<td></td>
<td>DA601 LAB</td>
<td></td>
<td></td>
<td>DA603</td>
</tr>
</tbody>
</table>
<br><br>
<table id="2">
<thead>
<tr>
<th>Day</th>
<th>09-10</th>
<th>10-11</th>
<th>11-12</th>
<th>12-13</th>
<th>13-14</th>
<th>14-15</th>
<th>15-16</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>DA601</td>
<td>DA602</td>
<td>DA603</td>
<td></td>
<td></td>
<td>DA601 LAB</td>
<td></td>
</tr>
<tr>
<td>Tuesday</td>
<td>DA601</td>
<td>DA602 LAB</td>
<td></td>
<td>DA601 LAB</td>
<td></td>
<td></td>
<td>DA603</td>
</tr>
</tbody>
</table>
CSS
table *{
border: 1px solid black;
padding: 5px;
}
table{
border-collapse: collapse;
}
JavaScript
$(document).ready(function(){
$('table#2 tbody tr td').each(function(){
var value = $(this).html();
if(value.indexOf("LAB") !== -1){ //true
$(this).attr("colspan", 2);
$(this).next("td").remove(); // removes extra td
}
});
});