JSFiddle - React, Tailwind, and code Playground

HTML

<table id="RightTable" cellpadding="0" cellspacing="0" border="0", style="width:100%" class="display">
    <thead>
      <tr>
        <th style="width:auto;">Selected</th> 
        <th style="width:auto;">Right</th>
      </tr>
    </thead>
    <tbody>
      <c:forEach var="wur" items="${webdUserGroup.webdUserRights}">
        <tr>
          <td><input type="checkbox" name="webdUserRightKey" value="${wur.webdUserRightKey}" checked="checked" /></td>
          <td>${wur.descrip}</td>
        </tr>      
      </c:forEach>
      <c:forEach var="wur" items="${webdUserRights}">
        <tr>
          <td><input type="checkbox" name="webdUserRightKey" value="${wur.webdUserRightKey}" /></td>
          <td>${wur.descrip}</td>
        </tr>      
      </c:forEach>
    </tbody>
  </table>
  <br/>

  <input type="hidden" name="webdGroupKey" value="${webdUserGroup.code}" />

CSS

.dataTables_scroll
{
    overflow:auto;
    width:150px;
    height:20px;
}
th {
text-align:left
}

JavaScript

$(function(){
 		
	  $( "#RightTable" ).dataTable( { 
	    "oLanguage": { "sSearch": "Filter results: " },
	     
		  "sScrollY": "280px",
	      "bAutoWidth": true,
	      "aaSorting" : [ [ 0, "desc" ]],
	      "aoColumns": [
	            { sWidth: '5%' },
	      		{ sWidth: '95%'}
	      	]
	    }).fnAdjustColumnSizing( true );
	    
   });