JSFiddle - React, Tailwind, and code Playground

HTML

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />

<table class="jtable">
    <caption>Header name</caption>
    <thead><tr><th style="width: 13%;">Field1</th><th style="width: 13%;">Field2</th><th style="width: 13%;">Field3</th><th style="width: 60%;">Field4</th></tr></thead>
    <tfoot>
        <tr>
            <th>Summary</th>
            <th colspan="3">Values</th>
        </tr>
    </tfoot>
    <tbody>
       <tr><td>a1</td><td>a2</td><td>a3</td><td>a4</td></tr>
       <tr><td>a1</td><td>a2</td><td>a3</td><td>a4</td></tr>
       <tr><td>a1</td><td>a2</td><td>a3</td><td>a4</td></tr>
       <tr><td>a1</td><td>a2</td><td>a3</td><td>a4</td></tr>
       <tr><td>a1</td><td>a2</td><td>a3</td><td>a4</td></tr>
       <tr><td>a1</td><td>a2</td><td>a3</td><td>a4</td></tr>
       <tr><td>a1</td><td>a2</td><td>a3</td><td>a4</td></tr>
       <tr><td>a1</td><td>a2</td><td>a3</td><td>a4</td></tr>
       <tr><td>a1</td><td>a2</td><td>a3</td><td>a4</td></tr>
       <tr><td>a1</td><td>a2</td><td>a3</td><td>a4</td></tr>
       <tr><td>a1</td><td>a2</td><td>a3</td><td>a4</td></tr>
       <tr><td>a1</td><td>a2</td><td>a3</td><td>a4</td></tr>
       <tr><td>a1</td><td>a2</td><td>a3</td><td>a4</td></tr>
       <tr><td>a1</td><td>a2</td><td>a3</td><td>a4</td></tr>
       <tr><td>a1</td><td>a2</td><td>a3</td><td>a4</td></tr>
       <tr><td>a1</td><td>a2</td><td>a3</td><td>a4</td></tr>
       <tr><td>a1</td><td>a2</td><td>a3</td><td>a4</td></tr>
       <tr><td>a1</td><td>a2</td><td>a3</td><td>a4</td></tr>
       <tr><td>a1</td><td>a2</td><td>a3</td><td>a4</td></tr>
       <tr><td>a1</td><td>a2</td><td>a3</td><td>a4</td></tr>
       <tr><td>a1</td><td>a2</td><td>a3</td><td>a4</td></tr>
       <tr><td>a1</td><td>a2</td><td>a3</td><td>a4</td></tr>
       <tr><td>a1</td><td>a2</td><td>a3</td><td>a4</td></tr>
       <tr><td>a1</td><td>a2</td><td>a3</td><td>a4</td></tr>
    </tbody>
</table>

CSS

.scroll-content {
     overflow-y: auto;
    width:100%;
 }
div.jtable-main-container {
  height:100px;
}

JavaScript

var JTable = function() {};
JTable.Setup = function() {
    var table = $('.jtable');
    $('caption', table).addClass('ui-state-default');
    $('th', table).addClass('ui-state-default');
    $('td', table).addClass('ui-widget-content');
    $(table).delegate('tr', 'hover', function() {
        $('td', $(this)).toggleClass('ui-state-hover');
    });
    $(table).delegate('tr', 'click', function() {
        $('td', $(this)).toggleClass('ui-state-highlight');
    });
};

JTable.SetupNewRows = function(rows) {
    $(rows).find('td').addClass('ui-widget-content');
};
$(function() {
    JTable.Setup();
    var newRows = $('<tr><td>b1</td><td>b2</td><td>b3</td><td>b4</td></tr>');
    JTable.SetupNewRows(newRows);
    $('tbody').append(newRows);
});