JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<table style="width:60%" class="reference">
	<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

$(window).resize(function(){
  
  var tableWidth = $("table").width();
  console.log("tableWidth ", tableWidth);
    
  var divWidth = $("div").width();
  console.log("divWidth ", divWidth);

  if (tableWidth > divWidth) {
    $("table").addClass("small"); 
  } else {
    $("table").removeClass("small"); 
  }
  
});