JSFiddle - React, Tailwind, and code Playground

by Dumine Stefan Daniel

HTML

<table id='apps_table' class='table table-hover'>
                    <thead>
                        <tr>
                            <td rowspan='2'> </td>
                            <th colspan='2' class='text-center'>PM</th>
                            <th colspan='2' class='text-center'>Inspection</th>
                            <th colspan='2' class='text-center'>uSON</th>
                            <th colspan='6' class='text-center'></th>
                        </tr>
                        <tr>
                            <td class='text-center'><b>6.0</b></td>
                            <td class='text-center'><b>6.1</b></td>
                            <td class='text-center'><b>6.0</b></td>
                            <td class='text-center'><b>7.0</b></td>
                            <td class='text-center'><b>4.0</b></td>
                            <td class='text-center'><b>4.1</b></td>
                            <td style='min-width: 150px;' class='servers-info'><b>Dates</b></td>
                            <td style='min-width: 70px;' class='servers-info'><b>2G</b></td>
                            <td style='min-width: 70px;' class='servers-info'><b>3G</b></td>
                            <td style='min-width: 70px;' class='servers-info'><b>4G</b></td>
                            <td style='min-width: 70px;' class='servers-info'><b>CDMA</b></td>
                            <td style='min-width: 70px;' class='servers-info'><b>WIFI</b></td>
                        </tr>
                    </thead>
                    <tbody>

                        <tr>
                            <td>
                                <b class='showFullDetails'> AVEA </b>
                            </td>

                          
				            <td align='center'>
                                <a App="PM" Customer="AVEA" Version="6.0" info=""
								href="" id='btn_1' 
								class="btn btn-default disabled checkDB" data-toggle="tooltip"...

CSS

table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}
td, th, .row, .col, .ff-fix {
    cursor: pointer;
    padding: 10px;
    position: relative;
}
th,
td{
    border: 1px solid #CCC;
    width: 33.33%;
}
td:hover::before,
.row:hover::before,
.ff-fix:hover::before { 
    background-color: #00A3E0;
    content: '\00a0';  
    height: 100%;
    left: -5000px;
    position: absolute;  
    top: 0;
    width: 10000px;   
    z-index: -1;   
}
td:hover::after,
.col:hover::after,
.ff-fix:hover::after { 
    background-color: #00A3E0;
    content: '\00a0';  
    height: 10000px;    
    left: 0;
    position: absolute;  
    top: -5000px;
    width: 100%;
    z-index: -1;        
}