@TheDoc Haha, I have no idea. I've got six table cells in a row, and I've assigned each table cell a percentage width.

table.checkout_cart tr.product_row td.firstcol {
	width: 11%;
	background: red;
}

table.checkout_cart tr.product_row td.wpsc_product_name {
	width: 40%;
	background-color: green;
}

table.checkout_cart tr.product_row td.wpsc_product_quantity {
	width: 14%;
	background-color: blue;
}

table.checkout_cart tr.product_row td.wpsc_single_price {
	width: 11%;
	background-color: lime;
}

table.checkout_cart tr.product_row td.wpsc_product_price {
	width: 11%;
	background-color: aqua;
}

table.checkout_cart tr.product_row td.wpsc_product_remove {
	width: 13%;
	background-color: red;
}

The problem is, the combined total of these widths make up 100%, so why aren't my cells filling up this table row? (see below)



The only way I can remedy this is by assigning a float: left; to my table cells, by doing that though I lose my vertical-align.

Clearly I'm doing something wrong, any help would be appreciated. I hope it makes sense what I'm trying to do. Thanks.

@TheDoc That works, but now how to add the border-radius and padding without floating left?

http://jsfiddle.net/NDFY3/24/

@TheDoc When I add display: block I get back to same problem I was having before, the cells aren't filling up the table row, even though the values assigned make up 100%.

http://jsfiddle.net/NDFY3/39/

@TheDoc Thanks for that. Do you know why my borders are ignoring the rounded corners?

http://jsfiddle.net/NDFY3/45/

Honestly, I have nary a clue! If it's working then I'd stick with it!