JSFiddle - React, Tailwind, and code Playground

by wallabykid

HTML

<table id="cart_1234" class="cart ui-droppable">
  <tbody><tr>
    <th class="dscr left">Item Description</th>
    <th class="right qty">Qty</th>
    <th class="right smry_price">Price</th>
    <th class="right item_total">Total</th>
    <th class="rfd_col cb">Refund</th>
    <th class="rfd_col">Qty/Amt</th>
  </tr>
  <tr class="cart_item" id="WALLASYd7L_5074b68907ee3">
    <td class="hide product_id">WALLASYd7L_5074b68907ee3</td>
    <td class="hide product_volume">1,728.00</td>
    <td class="hide product_weight">1.00</td>
    <td class="hide max_qty">1</td>
    <td class="hide cost">20.48</td>
    <td class="hide merchandise">1</td>
    <td class="hide taxable">1</td>
    <td class="dscr">Disney Pixar Cars, Lighting McQueen Boys' Toddler Helmet and Pads Value Pack</td>
    <td class="right qty" title="Quantity Ordered">1</td>
    <td class="price">28.67</td>
    <td class="ttl" title="Item Total">28.67</td>
    <td class="center rfd_col cb"><input class="rfd_cb" checked="checked" type="checkbox"></td>
    <td class="right rfd_col"><input class="rfd_qty" value="1" type="text"></td>
  </tr>
  <tr class="sums">
    <td class="right" colspan="3"><span class="orders_help">Tax</span></td>
    <td class="ttl" title="Total Sales Tax">0.00</td>
    <td class="center rfd_col cb"></td>
    <td class="rfd_col"></td>
  </tr>
  <tr class="sums">
    <td class="right" colspan="3"><span class="orders_help">Shipping</span></td>
    <td class="ttl" title="Total Shipping">8.71</td>
    <td class="center rfd_col cb"><input class="rfd_cb" checked="checked" type="checkbox"></td>
    <td class="right rfd_col"><input size="5" class="right rfd_shipping mtry" value="8.71" type="text"></td>
  </tr>
  <tr class="sums  refund_full">
    <td class="right" colspan="3">Order Total</td>
    <td class="ttl" title="Order Total">37.38</td>
    <td class="center rfd_col cb"><input class="rfd_full" checked="checked" type="checkbox"></td>
    <td class="rfd_col right"><span title="Maximum...

CSS

.hide, .rfd_col { display:none; }
.left{ text-align:left;}
.center { text-align:center;}
.right , .price, .ttl, .sums td { text-align:right; }

/*TABLE AND CELL WIDTHS*/
.cart { width: 515px; table-layout: fixed; margin 0px 0px 10px 0px}
.cart, .rfd  tr.sums { border:none; }
.smry_price { width:30px; padding-right:5px; }
.rfd_qty { width:32px; }
.cb { width:30px; }
.qty { width:20px; padding-right:15px; }
.item_total, .ttl { width:40px; padding-right:10px; }
th.rfd_col, td.rfd_col { width:50px; font-size:smaller; }
th { background:blue; color:#ffffff; }
th.inv_hd { padding-left:5px; text-align:left; }
th.list_status { padding-left:10px; text-align:left; }
td > input[type='text'] { font-size:85%; margin-top:-3px; margin-bottom:-3px; }
.dscr, td.dscr, th.dscr
{   min-width: 70%;
    max-width: 70%;
    width: 70%;
    text-align:left;
    padding-left:10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
span.rfd_full {font-size: small;}

JavaScript

jQuery(function(){
    jQuery('.button.refund').click(function()
    {   jQuery('.rfd_col').show();
        jQuery(this).hide();
        var foo = jQuery('#cart_1234').width();
        alert('cart table width='+foo);
    });

    jQuery('.button.cxl_rfd').click(function()
    {   jQuery('.rfd_col').hide();
        jQuery('.button.refund').show();
        jQuery('#cart_1234').css('border', '1px solid red');
        var foo = jQuery('#cart_1234').width();
        alert('cart table width='+foo);
     });
});