Sorry to be slow, @fumeeptc, but I felt that this point was worth mentioning since you are working with a table.
Tables are interesting beasts.
There is an error in your code, https://jsfiddle.net/master1991/10xLj42m/, that is not obvious to the casual observer, but it can have far-reaching effects.
Please take a moment and look at your code carefully… count columns.
In the first row you have 7 columns (one “normal” + three colspan="2" for a total of 7
The next two rows contain only 6 columns. That is an error, of course. All rows must account for the same number of columns. It’s a matrix, after all.
But what’s the big deal? The table certainly looks good.!.
But notice that the first and last columns are wider than the middle 4. The widths are not eventy distributed. But still it looks good… doesn’t it?
I would like for you to make one change to the first row in your fiddle.
Either move the first <td> to the end of the row, like this:
<tr>
<td align="center" colspan="2">BCD</td>
<td align="center" colspan="2">CDE</td>
<td align="center" colspan="2">DEF</td>
<td align="center">ABC</td>
</tr>
OR move colspan="2" from the last cell to the first cell, like this:
<tr>
<td align="center" colspan="2">ABC</td>
<td align="center" colspan="2">BCD</td>
<td align="center" colspan="2">CDE</td>
<td align="center">DEF</td>
</tr>
It does not matter which you do, the number of columns remains 7; only the positon of the unspanned td changes.
You should see this result:
https://jsfiddle.net/10xLj42m/1/
https://jsfiddle.net/10xLj42m/2/
Attention to details matters, especially on a page as complex as the one you are writing. Please go back through your page and balance the HTML so you have the same number of columns accounted for in each row. You may find out that 12 columns is the magic number that will allow your table to look the way you want it to. I don’t know that because we have not seen a picture of your ideal table and how it will be used.
Unless told otherwise, I tend to believe that coders want their products to be good quality and to understand how the code works. If I am spending too much time on the nuances of table layouts, please let me know. Otherwise, you need to do some work on your table.
My test page:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>tables, colspans, rowspans</title>
<!--
https://www.sitepoint.com/community/t/issues-with-html-table/283160/4
https://jsfiddle.net/10xLj42m/
-->
<style>
td,th {
font-weight:normal;
text-align:center;
vertical-align:middle;
}
.red {background-color:red;}
.blue {background-color:blue;}
.green {background-color:green;}
.silver {background-color:silver;}
td {
height:2em; /* Normally, content determines height. */
color:white;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>ABC</th>
<th colspan="2">BCD</th>
<th colspan="2">CDE</th>
<th colspan="2">DEF</th>
</tr>
</thead>
<tbody>
<tr>
<td class="blue">1</td>
<td class="blue">2</td>
<td class="blue">3</td>
<td class="green">4</td>
<td class="green">5</td>
<td class="green">6</td>
</tr>
<tr>
<td class="silver">7</td>
<td class="silver">8</td>
<td class="silver">9</td>
<td class="red">10</td>
<td class="red">11</td>
<td class="red">12</td>
</tr>
</tbody>
</table>
</body>
</html>
https://validator.w3.org/nu/
Postscript: colspan and rowspan can be awkward to use because tables interpret the widths of the columns from left to right and rows from top to bottom. If not carefully defined, colspan widths or rowspan heights that depend on antecedent elements (those above or to the left) can be ambiguous and render unexpected results. I am looking for a demo page that I wrote a few years ago that demonstrates the issue using a table with about half a dozen rows and columns. If I find it, I’ll attach it here. When I last checked, those colspan and rowspan algorithms were browser dependent. 
