JSFiddle - React, Tailwind, and code Playground

HTML

<table style="border-radius: 10px;border: 1px solid grey; text-align: center;">
      <thead style="display: block;">
           <tr>
                <td style = "width:10%;"><input id="chkSelectAllSubs" type="checkbox"></td>
                <td style = "width:40%;">Subscriber ID</td>
                <td style="width:50%">Subscriber Name</td>
           </tr>
     </thead>
     <tbody style="display: block; max-height: 300px; overflow-y: scroll" width="100%">
           <tr>
                 <td style = "width:10%;"><input id="chk_13450" type="checkbox"></td>
                 <td style = "width:40%;">13450</td>
                 <td style = "width:50%;">GREEN JOE</td>
          </tr>
          <tr>
               <td style = "width:10%;"><input id="chk_44109" type="checkbox"></td>
               <td style = "width:40%;">44109</td>
               <td style = "width:50%;">John26 Smith26</td>
         </tr>
           <tr>
                 <td style = "width:10%;"><input id="chk_13450" type="checkbox"></td>
                 <td style = "width:40%;">13450</td>
                 <td style = "width:50%;">GREEN JOE</td>
          </tr>
          <tr>
               <td style = "width:10%;"><input id="chk_44109" type="checkbox"></td>
               <td style = "width:40%;">44109</td>
               <td style = "width:50%;">John26 Smith26</td>
         </tr>   
     </tbody>
 </table>

CSS

table {width:100%; }
table tr {width:100%;display: table;}