JSFiddle - React, Tailwind, and code Playground

by Mehmet Yener

HTML

<div class="form-group">
 <div class="CustomTableBlock_01">
  
     <table class="customTable_01" border="1">
       <thead>
        <tr>
          <th>
             FIRST COLUMN
          </th>

          <th>
            SECOND COLUMN
          </th>
         </tr>
         </thead>
         <tbody>
                 <tr>
                 <td>FIRST VAL</td>
                         
                 <td>
                    SECOND VAL
                  </td>
                </tr>
             
             <tr>
                 <td>FIRST VAL</td>
                         
                 <td>
                    SECOND VAL
                  </td>
                </tr>
             
           </tbody>
         </table>
        
   </div>

CSS

.CustomTableBlock_01{
position: relative;
min-height: 1px;
padding-left: 14px;
padding-right: 15px;
float:left;
width:70%;
height:200px;
background-color:green;
}

.customTable_01{
    background-color:yellow;
    display:block;
    width:97%;
    height: 200px;
    overflow:auto;
}

table > thead > tr > th:nth-child(1)
{ 
    width:30%;
}
table > thead > tr > th:nth-child(2)
{ 
    width:70%;
}

body > div > div > table > tbody > tr > td:nth-child(1)
{
    width:30%;
    background-color:aqua;
}

body > div > div > table > tbody > tr > td:nth-child(2)
{
    width:70%;
    background-color:aqua;
}