JSFiddle - React, Tailwind, and code Playground

by lindychen

HTML

<table class="shop_table woocommerce-checkout-review-order-table">
	<thead>
		<tr>
			<th class="product-name">Product</th>
			<th class="product-total">Total</th>
		</tr>
	</thead>
	<tbody>
						<tr class="cart_item">
					<td class="product-name">
						Annual Subscription&nbsp;						 <strong class="product-quantity">× 1</strong>											</td>
					<td class="product-total">
						<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>12.99</span>					</td>
				</tr>
					</tbody>
	<tfoot>

		<tr class="cart-subtotal">
			<th>Subtotal</th>
			<td><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>12.99</span></td>
		</tr>

		
		
		
		
		
		<tr class="order-total">
			<th>Total</th>
			<td><strong><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>12.99</span></strong> </td>
		</tr>

		
	</tfoot>
</table>

CSS

/* Change order table css https://wordpress.org/support/topic/how-to-add-border-on-checkout-table-format/ */
.woocommerce #order_review table.shop_table {
    border: 1px solid;
    border-color: black;
    border-radius: 0px;
    font-size: 1em;
    
}

/* Change order table css https://wordpress.org/support/topic/how-to-add-border-on-checkout-table-format/ */
.woocommerce #order_review table.shop_table th{
    border: 0px solid;
    border-color: black;
    border-radius: 0px;
    font-size: 1em;

}

/* Change order table css https://wordpress.org/support/topic/how-to-add-border-on-checkout-table-format/ */
.woocommerce #order_review table.shop_table td{
    border: 0px solid;
    border-color: black;
    border-radius: 0px;
    font-size: 1em;

}