simplecart js, space between items attributes

Question

I'm trying out simpleCart(js) but in my cart all the items attributes are bunched up together. How can I space them out?

This is my initalization script

<script>
   simpleCart({
   currency: "GBP",
   checkout: {
      type: "PayPal",
      email: "you@yours.com"
   },
   cartColumns: [
    { attr: "name", label: "Name" } ,
    { attr: "price" , label: "Price", view: 'currency' } ,
    { attr: "quantity" , label: "Qty" } ,
    { attr: "total" , label: "SubTotal", view: 'currency' } ,
    { view: "remove" , text: "Remove Item" , label: false }
],
cartStyle : "table"
   });

</script>

This is my cart view

<div class="cart">
<div class="simpleCart_items">   </div>',
<span class="simpleCart_quantity"></span> items - <span class="simpleCart_total">  
</span>
<a href="javascript:;" class="simpleCart_checkout">Checkout  </a>
<a href="javascript:;" class="simpleCart_empty">  Empty Basket</a>
</div>
</div>

Can anyone help me?

Answer 1

You can achieve it with CSS styles. Simply use this selector .cart .simpleCart_items table tr th and add the margin or padding. That's up to you.

CSS should look like this:

.cart .simpleCart_items table tr th{
    padding: 8px;
}