JSFiddle - React, Tailwind, and code Playground

by Gauthaman Sahadevan

HTML

<table border="1">
  <thead>
    <tr class="tableHeading">
      <th width="10%">Description</th>
      <th width="5%">Pack</th>
      <th width="5%">size</th>
      <th width="7%">Vendor Item Code #</th>
      <th width="12%">UPC #</th>
      <th width="9%">Item Quantity</th>
      <th width="9%">Previous
        <br>Item Quantity</th>
      <th width="8%">% Variance
        <br>Quantity Count</th>
      <th width="7%">Unit Cost</th>
      <th width="10%">Total Cost</th>
      <th width="10%">Previous Cost</th>
      <th width="8%">% Variance
        <br>Cost</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="12">
        <div class="scrollit">
          <table>
            <tr class="">
              <td width="10%">TOSTADA CASERA TRANSFERS</td>
              <td width="5%">1</td>
              <td width="5%">24 CNT</td>
              <td width="7%">658978990552</td>
              <td width="12%" style="width: 7%; overflow: hidden;">748703800199</td>
              <td width="9%" id="quantity" data-itemid="905">56565</td>
              <td width="9%">0</td>
              <td width="8%">100</td>
              <td width="7%">$0.68</td>
              <td width="10%">$0.00</td>
              <td width="10%">$0.00</td>
              <td width="8%">0</td>
            </tr>
            <tr class="">
              <td width="10%">TOSTADA BOTANERA TRANSFERS</td>
              <td width="5%">1</td>
              <td width="5%">30 CNT</td>
              <td width="7%">658978990652</td>
              <td width="12%">748703800205</td>
              <td width="9%" id="quantity" data-itemid="906">5654654</td>
              <td width="9%">1</td>
              <td width="8%">100</td>
              <td width="7%">$0.73</td>
              <td width="10%">$0.00</td>
              <td width="10%">$0.73</td>
              <td width="8%">0</td>
            </tr>
            <tr class="">
              <td width="10%">DORITOS DE HARINA TRANSFERS</td>
              <td...

CSS

.scrollit {
  overflow: scroll;
  height: 100px;
}