JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<table style="width:60%" class="reference" class="small">
	<tbody>
        <tr>
		    <th>Firstname-Heading</th>
            <th>Lastname-Heading</th>
		    <th class="mobile-hide">Points-Heading</th>
	</tr>
	<tr>
		<td>Jill</td>
		<td>Smith</td>		
		<td class="mobile-hide">50</td>
	</tr>
	<tr>
		<td>Eve</td>
		<td>Jackson</td>		
		<td>94</td>
	</tr>
	<tr>
		<td>John</td>
		<td>Doe</td>		
		<td>80</td>
	</tr>
	<tr>
		<td>Adam</td>
		<td>Johnson</td>		
		<td>67</td>
	</tr>
</tbody></table>
</div>

CSS

td, th {
  white-space: nowrap;
  word-wrap: normal;
}
div {
    width: 50%;
    overflow-x: auto;
}
table.small {
    font-size: 0.5em;
}
table.small .mobile-hide {
    display: none;
}

JavaScript

function applyLayout() {
  var tableWidth = $("table").width();
  console.log("tableWidth ", tableWidth);
    
  var divWidth = $("#wrapper").width();
  console.log("divWidth ", divWidth);

  if (tableWidth > divWidth) {
    $("table").addClass("small"); 
  } else {
    $("table").removeClass("small"); 
  }
}
var timer = 0;
 var delayToCall = (function () {
    return function (callback, ms) {
        if (timer > 0) {
            clearTimeout (timer);
        }
        timer = setTimeout(callback, ms);
    };
})();
$(window).resize(function(){
    delayToCall(function(){
        applyLayout();
    }, 500);  
});