Table Borders & Image Margin/Padding

[LinusIT]

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

[milosevic]

Hi LinusIT,

Try changing your rules for the 'buynow' class to be on .noborder td

The padding you want to remove should be on the parent td, rather than the contained anchor or image.

It's good in addition to reset images to not use padding or margins for the whole site at the top of your css file with a rule like:

img {
margin 0; padding 0;
}

Hope this helps!

[LinusIT]

Thanks Milosevic

I looked at the code again and made some changes. Seeing as each cell had it's own class anyway, I added the border style to these and left the buynow cell without a border.

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

I tried adding the img code you suggested but this did nothing, possibly because I already have the same code under *. I added the following to get around the image padding & margin

#content-body img.buynow {float:left; margin: 0px; padding:0px;}

[milosevic]

Hi, glad you've sorted it, yes, a * rule will do exactly the same thing.