JSFiddle - React, Tailwind, and code Playground

HTML

<caption>Table 1 Example</caption>    
<table id="fx">        
    <tr class="h130">
        <th class="w75">Values</th>
        <td class="w25">1</td>
        <td class="w25">1</td>
        <td class="w25">1</td>
        <td class="w25">1</td>            
    </tr>
    <tr>
        <th class="w75">Initial value</th>
        <td class="w25">One</td>
        <td class="w25">Two</td>
        <td class="w25">Three</td>
        <td class="w25">Four</td>            
    </tr>        
</table>

<caption>Table 2 Example</caption>    
<table id="fx2">    
    <tr class="h130">
        <th class="w75">Values</th>
        <td class="w25">Long Text Example</td>
        <td class="w25">1</td>
        <td class="w25">1</td>
        <td class="w25">1</td>        
    </tr>
    <tr>
        <th class="w75">Initial value</th>
        <td class="w25">One</td>
        <td class="w25">Two</td>
        <td class="w25">Three</td>
        <td class="w25">Four</td>        
    </tr>      
</table>

CSS

table{
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}
tr, th, td{
    border:1px solid #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.w25{width:10%;max-width:75px;}
.w75{width:60%}
.h130{height:130px;}