JSFiddle - React, Tailwind, and code Playground

HTML

Probelm:<br/>
<table cellspacing="0" cellpadding="0" style="width: 400px;">
        <colgroup> 
<col style="width:50px;" /> 
<col style="width:50px;" /> 
<col style="width:300px;" /> 
</colgroup> 
   <thead>
      <tr>
         <td colspan="3">text</td>
      </tr>
      <tr>
         <td style="width:50px;">First</td>
         <td style="width:50px;">Last</td>
         <td style="width:300px;">Add</td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Nao</td>
         <td>Yeh</td>
         <td>Has</td>
      </tr>
      <tr>
         <td>And</td>
         <td>Vod</td>
         <td>Far</td>
      </tr>
      <tr>
         <td>Ana</td>
         <td>Pik</td>
         <td>Ins</td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
         <td colspan="3">
            <a href="javascript:void(0)">1</a>
            <a href="javascript:void(0)">2</a>
         </td>
      </tr>
   </tfoot>
</table>

<br/>
<br/>

No Probelm:<br/>
<table cellspacing="0" cellpadding="0" style="width: 400px;">
   <thead>
      <tr>
         <td style="width:50px;">First</td>
         <td style="width:50px;">Last</td>
         <td style="width:300px;">Add</td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Nao</td>
         <td>Yeh</td>
         <td>Has</td>
      </tr>
      <tr>
         <td>And</td>
         <td>Vod</td>
         <td>Far</td>
      </tr>
      <tr>
         <td>Ana</td>
         <td>Pik</td>
         <td>Ins</td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
         <td colspan="3">
            <a href="javascript:void(0)">1</a>
            <a href="javascript:void(0)">2</a>
         </td>
      </tr>
   </tfoot>
</table>

CSS

table { table-layout: fixed !important; border-style:solid; }
td { border-style:solid; }