JSFiddle - React, Tailwind, and code Playground

by Sree K

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body data-gr-c-s-loaded="true" cz-shortcut-listen="true" style="">
<table width="100%" style="vertical-align: bottom; color: #000000; font-weight: bold; font-style: italic;">
    <tbody>
    <tr>
        <td width="33%"></td>
        <td width="33%" align="center" style="font-weight: bold; font-family: serif; font-size: 10pt;"></td>
        <td width="33%"></td>
    </tr>
    <tr>
        <td width="33%"></td>
        <td width="33%" align="center" style="font-weight: bold; font-style: italic; font-size: 8pt;"></td>
        <td width="33%"></td>
    </tr>

    </tbody>
</table>


<table class="table" id="aca_tbl" width="100%" cellspacing="0">
    <thead>
    <tr>
        <th style="border: none; text-align: left" colspan="8"><br>Zone : Dhaka</th>
        <th style="border: none; text-align: right"><br>Area : Admin Dhaka</th>
    </tr>
    <tr>
        <th>Ship</th>
        <th>Unit</th>
        <th>Branch</th>
        <th>Rank</th>
        <th>Part-II</th>
        <th>Sanct.</th>
        <th>Brone</th>
        <th>In</th>
        <th>Out</th>
    </tr>
    </thead>
    <tbody>
    <tr class="allrow">
        <!--Ship Col-->
        <td rowspan="71">CAB</td>
        <!--Posting Col-->
        <td rowspan="19">HM/CAB</td>
        <!--Branch Col-->
        <td rowspan="19">SEAMAN</td>
        <td>MCPO(X)</td>
        <td>QA-I</td>
        <td></td>
        <td>1</td>
        <td>0</td>
        <td>1</td>
    </tr>

    <!--Branch Total Row-->
    <tr class="allrow">
        <!--Ship Col-->

        <!--Posting Col-->

        <!--Branch Col-->

        <td>CPO</td>
        <td>FC-I</td>
        <td></td>
        <td>4</td>
        <td>0</td>
        <td>3</td>
    </tr>

    <!--Branch Total Row-->
    <tr class="allrow">
        <!--Ship Col-->

        <!--Posting Col-->

        <!--Branch Col-->

        <td>CPO</td>
        <td>QA-I</td>
        <td></td>
       ...

CSS

#footer {
            text-align: center;
        }
        .ships {
          background-color: red;
        }

        .footer-text {
            text-align: center;
        }

        #aca_tbl th, #aca_tbl td {
            border: 1px solid black;
            padding: 5px;
        }

        #aca_tbl {
            border-collapse: collapse;
        }

JavaScript

$(document).ready(function () {

        let allrow = $('body .allrow');

        // all ships which are grater than 1 rowspan
        allrow.find('td:eq(2)').filter(function () {
            //return this.rowSpan > 1;
            if (this.rowSpan > 1)
                $(this).parent().addClass('ships');
        });

        //All ships
        if (allrow.hasClass('ships')) {
            $('tbody .ships').each(function () {
                let thisShip = $(this);
                //ship
                let firstColShip = $(this).find('td:eq(0)');
                let secondColShip = $(this).find('td:eq(1)');
                let thirdColShip = $(this).find('td:eq(2)');

                let firstColRowspanShip = parseInt(firstColShip.attr('rowspan'));
                let secondColRowspanShip = parseInt(secondColShip.attr('rowspan'));
                let thirdColRowspanShip = parseInt(thirdColShip.attr('rowspan'));

                //console.log($(this).find('td[rowspan]').length);

                thisShip.addClass('units');

                //between two ship class inside all siblings or units filtered by rowspan
                thisShip.nextUntil('.ships').each(function () {

                    $(this).find('td:eq(0)').filter(function () {
                        if (this.rowSpan > 1)
                            $(this).parent().addClass('units');
                    });
                });

                let nextUnit = 0;

                // All units
                if (allrow.hasClass('units')) {
                    //console.log($('.units').length);
                    $('.units').each(function () {
                        //console.log(++i);
                        let thisUnit = $(this);
                        let thisIndex = $(this).index();
                        let firstColUnit;
                        let secondColUnit;
                        if ($(this).find('td[rowspan]').length == 2) {
                            firstColUnit =...