JSFiddle - React, Tailwind, and code Playground

HTML

<div class="big">
  <table>
    <thead>
      <th>aaaaaaaaaaaaaaaaaaaaaaaaaaa</th>
      <th>aaaaaaaaaaaaaaaaaaaaaaaaaaa</th>
    </thead>
    <tbody>
      <td>
        aaaaaaaaaa
      </td>      <td>
        aaaaaaaaaa
      </td>
    </tbody>
  </table>
</div>

<br><br><br><br><br>
<div class="small">
  <table>
    <thead>
      <th>aaaaaaaaaa</th>
    </thead>
  </table>
</div>

CSS

div{
  padding:10px;
  background-color: red;
}

table {
  background-color: green;
  border:solid black 1px;
 }

.big{
  width: 300px;
} 
.small{
  width: 100px;
} 

.overflow{
  overflow:auto;
}

JavaScript

for(var el=0; el<document.querySelectorAll("table").length; el++){
	if (document.querySelectorAll("table")[el].parentElement.offsetWidth < document.querySelectorAll("table")[el].offsetWidth ){
 
  	document.querySelectorAll("table")[el].parentElement.classList.add("overflow");
  }
}