I have a one-row table that I use to display a header on top of a webpage. The table has 3 cells with static images on the left and right. The image in the middle is repeated to fill the width of the screen. Here's the code I'm using:
<table style="width: 100%; border-collapse: collapse;">
<tr height="80" width="100%">
<td style="background-repeat:no-repeat; border:none" background="/images/left.png" width="690" />
<td style="background-repeat:repeat-x; background-position:middle" background="/images/middle.png" />
<td style="background-repeat:no-repeat; border:none" background="/images/right.png" width="190" />
</tr>
</table>
What I want to achieve is that the 3 images are neatly aligned without any borders. Unfortunately, the above code is not working. Although most borders are gone, there still is a 1-pixel line to the right of the images in the left and right table cells.
From left to right, the images are sized 690x80, 1x80, and 190x80 and match the size of the cells, and hence fail to see why the line is there.
Would appreciate some help on getting rid of the two 1-pixel borders
Add cellpadding="0" to your <table> tag.
Alternatively, you want to do this with CSS, use the following CSS rule:
table td,
table th{
padding: 0;
}