JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
    <table id="table">
        <tr><td>content</td><td>content</td><td>content</td></tr>
        <tr><td>content</td><td class="cell">content</td><td>content</td></tr>
        <tr><td>content</td><td>content</td><td>content</td></tr>
    </table>
</div>
<div class="loader"></div>

CSS

.loader {
    z-index: 30;
    text-align: center;
    background-color: #f00; /* Red, so I could see it properly */
    opacity:0.5;
    height:100px;
    width:100px;
    filter:alpha(opacity=50); /* For IE8 and earlier */
    position: relative;
    display:none;
}
#table {
    margin:50px;
    width:500px;
    border:1px solid #000;
    border-collapse:collapse;
}
td {
    padding:5px;
    border:1px solid #000;
}

JavaScript

jQuery(document).ready(function($) {
        offset = $('.cell').offset();
        w= $('.cell').outerWidth();
        h= $('.cell').outerHeight();
        $('.loader').css({
            "width": w,
            "height": h,
            "position":"absolute",
            "left":offset.left,
            "top":offset.top,
            "display":"block"
       });
       $('.cell').append($('.loader'));
    })