LinusIT - 11:01 pm on Jan 3, 2011 (gmt 0)

Hi

I have a table with several columns and rows that require a border but the last cell in each row I don't want a border applied. I think the way I've coded it is the problem however I don't want to add a class to each cell that requires a border, I'm sure there is a better way of doing it.

Sample HTML

<table cellspacing="0" class="sizes"> <tr> <td class="red">SIZE</td> <td class="blue">WAIST (inch)</td> <td class="green">LENGTH (inch)</td> <td class="pink">WEIGHT (kg)</td> </tr> <tr> <td>#*$!S</td> <td class="blue">20</td> <td class="green">10</td> <td class="pink">23-26</td> <td class="noborder"><a href="purchase.php?type=muaythai&size=#*$!S"><img src="images/shopping-cart-icon.jpg" alt="" width="35" height="35" class="buynow" /></a></td> </tr> <tr> <td>XXS</td> <td class="blue">22</td> <td class="green">11</td> <td class="pink">26-34</td> <td class="noborder"><a href="purchase.php?type=muaythai&size=XXS"><img src="images/shopping-cart-icon.jpg" alt="" width="35" height="35" class="buynow" /></a></td> </tr> <table>

Relevant CSS:

.sizes {font-weight:bold; font-size:20px; text-align:center; width:500px;border:1px solid #000;} .sizes td {padding:5px; border:1px solid #000;} .noborder td{border:none;} .buynow {margin:0; padding:0;} .green {color:#69ED10;} .pink {color:#D61FF3;} .blue {color:#263FFB;} .red {color:#F00;}

Also

The last cell contains an image and I'd like to remove all margin & padding styles as this bulks up the entire row and looks silly. I have added class="buynow" to each image but it's not taken into effect. In my stylesheet I have this which seems to be the problem:

#content-body img {float:left;margin:5px;padding:2px;}

Is there any way around this other than recoding other sections of the site?

Many thanks