JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 94%; float: right;height: 100%">
        <table id="tableRecivers"  style="height: 100%" class="fixed_headers">
            <thead>
                <tr class="ui-widget-header" style="text-align: center">
                    <th style="width: 3%">Checkbox</th>
                    <th style="width: 15%">Name</th>
                    <th style="width: 50px">Family</th>
                    <th style="width: 50px">Subject</th>
                </tr>
            </thead>
            <tbody >
                                   
            </tbody>
        </table>
    </div>

    <input type="button" id="add" value="Add Row"/>

CSS

.fixed_headers {
 width:100%;
 
margin-top: 10px
 }
#tableRecivers
{
    border:1px solid black;
    float:right;
}

  #tableRecivers th, td {
    text-align: right;
  }
 #tableRecivers  thead tr {
      display: block;
      position: relative;
  }
  #tableRecivers tbody {
    display: block;
    overflow: auto;
    width: 100%;
    height: 100px;
}
#add
{
}
}

JavaScript

$(function() {
        $("#add").click(function() {
            // row1
            var tbody = $("#tableRecivers tbody");
            var tr = "<tr>";
            tr += "<td>" + "<input type='checkbox'/></td>";
            tr += "<td>Name 1</td>";
            tr += "<td>Family 1</td>";
            tr += "<td>Subjec 1</td>";
            tr += "</tr>";
            tbody.append(tr);
             // row2
            var tbody = $("#tableRecivers tbody");
            var tr = "<tr>";
            tr += "<td>" + "<input type='checkbox'/></td>";
            tr += "<td>Name 2</td>";
            tr += "<td>Family 2</td>";
            tr += "<td>Subject 2</td>";
            tr += "</tr>";
            tbody.append(tr);
            
             // row3
            var tbody = $("#tableRecivers tbody");
            var tr = "<tr>";
            tr += "<td>" + "<input type='checkbox'/></td>";
            tr += "<td>Name 3</td>";
            tr += "<td>Family 3</td>";
            tr += "<td>Subject 3</td>";
            tr += "</tr>";
            tbody.append(tr);
            
             // row4
            var tbody = $("#tableRecivers tbody");
            var tr = "<tr>";
            tr += "<td>" + "<input type='checkbox'/></td>";
            tr += "<td>Name 4</td>";
            tr += "<td>Family 4</td>";
            tr += "<td>Subject 4</td>";
            tr += "</tr>";
            tbody.append(tr);
        });
    }
    );