HTML table cells not properly aligned
- by Yuval A
I have the following HTML table:
<table style="width: 100%;">
<tr>
<td class="title_bar_left_border"></td>
<td class="title_bar_middle"></td>
<td class="title_bar_right_border"></td>
</tr>
</table>
With the following css rules:
.title_bar_left_border
{
BACKGROUND-IMAGE: url(tray_left.gif);
WIDTH: 3px;
HEIGHT: 24px;
}
.title_bar_right_border
{
BACKGROUND-IMAGE: url(tray_right.gif);
WIDTH: 3px;
HEIGHT: 24px;
}
.title_bar_middle
{
BACKGROUND-IMAGE: url(tray_middle.gif);
WIDTH: 100%;
BACKGROUND-REPEAT: repeat-x;
HEIGHT: 24px;
}
Any idea why this is the result?
Instead of getting a nice table header with rounded corners you get this weird gap between the cells. Where are the gaps coming from? Besides fixing this ugly issue, I would like to understand the rationale as to why all browsers render the HTML this way.
