JSFiddle - React, Tailwind, and code Playground

HTML

<body>
 
    <caption>Table 1 Example</caption>
    
  <table id="fx">
    
    <tr>
      <th class="a75">Values</th>
      <td class="a25 rotate overflow he rr">1</td>
        <td class="a25 rotate overflow he rr">1</td>
        <td class="a25 rotate overflow he rr">1</td>
        <td class="a25 rotate overflow he rr">1</td>
        
    </tr>
    <tr>
      <th class="a75">Initial value</th>
      <td class="a25">One</td>
      <td class="a25">Two</td>
      <td class="a25">Three</td>
      <td class="a25">Four</td>
        
    </tr>
      
  </table>
    
    <caption>Table 2 Example</caption>
    
    <table id="fx2">
    
    <tr>
      <th class="a75">Values</th>
      <td class="a25 rotate overflow he rr">Long Text Example</td>
        <td class="a25 rotate overflow he rr">1</td>
        <td class="a25 rotate overflow he rr">1</td>
        <td class="a25 rotate overflow he rr">1</td>
        
    </tr>
    <tr>
      <th class="a75">Initial value</th>
      <td class="a25">One</td>
      <td class="a25">Two</td>
      <td class="a25">Three</td>
      <td class="a25">Four</td>
        
    </tr>
      
  </table>
</body>

CSS

body{width:750px} 

table{
    display:block;
   border-width: 1px;
   border-style: solid;
   border-collapse: collapse;
   width: 100%;
    overflow: hidden;
 }
 
 #fx{
   table-layout: fixed;
    overflow: hidden;
 }

#fx2{
   table-layout: fixed;
    overflow: hidden;
 }

 tr, th, td{
   border-width:1px;
			   border-style: solid;
			  	overflow: hidden;
   				text-overflow: ellipsis;
			   white-space: nowrap;
			   word-wrap: break-word;
 }
 th{
   width: 5%;
 }

.over{overflow: hidden;}
.a24{width:10%}
.a75{width:60%}
.he{height:130px;}
.rotate{-webkit-transform:rotate(270deg);}
.rr{height:-1px;width:130px;margin-left:-30px;}