Table with rounded corners on the header

Help me to make a Table with rounded corners on the header :'(

[orfest]

I try to make a beautiful table. The first cell in the first and the last cells in the first row have rounded corners left and right correspondingly. Other cells in this row have just a repeat-x background.
All cells in other rows has 1px borders

I'm going mad of how different browsers draw borders. I cannot draw borders to first and last cells in the first row(because of rounded corners), if try to draw a white border(background also is white), then Opera and Safari, Firefox and IE treat it in different ways.

All could do is that it looks normally only in IE, in Opera the header is 1px shorter and in Firefox it is shifted 1px right :'(

I tryed a lot of tricks, drawing borders as background, invosible borders, making the header a separate table.
Maybe I missed smth :(

Please HELP!

<snip>

This is HTML of the table

<div class="for_table">
<table width="642">
<tr class="header"><th class="first">Windows</th><th>Macintosh</th><th class="last">Linux</th></tr>
<tr><td>AAA</td><td>BBB</td><td class="last">CCC</td></tr>
<tr><td>aaa</td><td>bbb</td><td class="last">ccc</td></tr>
</table></div>

and CSS was:

table{
table-layout:fixed;
border-collapse:collapse;
font-size:12px;
padding:0px;
margin:0px;
}
table tr{
border-bottom: 1px solid #cccccc;
margin-bottom:0px;
}
table tr.header{
height:29px;
background-image: none;
}
table th{
text-align:left;
font-size:12px;
font-weight:bold;
text-indent:10px;
padding:0px;
margin:0px;
background-image:url('table_middle_wh.png');
background-repeat:repeat-x;
border-right:1px solid #cccccc;
}
table th.first{
background-image:url('tab_corner_left_long_wh.png');
background-position:0% 0%;
background-repeat:no-repeat;
}
table th.last{
background-image:url('tab_corner_right_long_wh.png');
background-position:right top;
background-repeat:no-repeat;
border-right:0px none #000;
}
table td{
background-color:#ffffff;
text-indent:0px;
padding:2px 10px 10px 10px;
border-bottom:1px solid #cccccc;
vertical-align:top;
border-left:1px solid #cccccc;
}
div.for_table{
background-image:url('border_right_wh.png');
background-position:right top;
background-repeat:repeat-y;
margin:0px 0px 0px 40px;
padding:0px 0px 0px 0px;
}

[edited by: DrDoc at 3:27 pm (utc) on July 12, 2007]
[edit reason] No URLs, thanks. See TOS #13 [WebmasterWorld.com]. [/edit]

[tomda]

IE is wrong... Opera and Firefox are presumably correct. You should always work on Firefox or Opera; when the layou is OK on FF or Opera, then you can check on IE.

The 1px problem is presumably due to a border problem.
Try adding 1px border to th.first and see what's happening.

[orfest]

Adding
border-left:1px solid #fff;
to th.first makes it to look similarly in IE,FF,Opera,Safari, but they look exactly like on the picture, the header is 1px shorter and shifted to the right.

[orfest]

Maybe someone can offer an easier way, without drawing borders as images?