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;
}

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

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