JSFiddle - React, Tailwind, and code Playground

HTML

<div class="xTable">
 <table>
  <tr>
   <td>
    <div class="xTable">
     <table>
      <tr>
       <td>
        <div class="xTable">
         <table>
          <tr>
           <td>
            <div class="xTable">
             <table>...</table>
            </div>
           </td>
          </tr>
         </table>
        </div>
       </td>
      </tr>
     </table>    
    </div>
   </td>
  </tr>
 </table>
</div>

CSS

table { width:100%; }
table td { height:50px; }

.xTable {
    background:#fff;
}

body > .xTable > table > tr > td > .xTable,
body > .xTable > table > tbody > tr > td > .xTable {
    background:#f30;
}