I have a table containing lots of data:
- multiple columns
- what will be dozens & dozens of rows

The table is styled to suit using CSS on TABLE, TR and TD.

Client wants header row (TR) to be frozen whilst the rows scroll beneath (think: freeze panes in Excel).

I'm achieving this by setting that TR (class="headrow") to position:relative.

However, doing so strips-off the BORDER styles on the TD's within the TR. But not the other styles. Seems to effect only the BORDERS. Strike the RELATIVE, the borders come back.

Can anyone provide a workaround to this? How i can get borders on a TD to render when the TR containing them is position:relative?

THE CSS

.wrap {
    height:200px;
    width:680px;
}

table.xyz {
    padding:0px;
    margin:0px;
    width:680px;
    border:0px;
    border-collapse:collapse;
}

table.xyz td {
    padding-left:2px;
    vertical-align:top;
    text-align:left;
    border-bottom:1px solid #000000;
    border-right:1px solid #000000;
}

table.xyz tr.headrow {
    font-weight:bold;
    background-color:#999999;
    position:relative;
}

table.xyz tr.odd {background-color: #FFFFFF;}
table.xyz tr.even {background-color: #EBEBEB;}

EXAMPLE OF HTML

<div class="wrap">
<table class="xyz" cellpadding="0px" cellspacing="0px">
    <tr class="headrow">
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
    </tr>
    <tr class="odd">
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr class="even">
        <td>Data</td>
         <td>Data</td>
         <td>Data</td>
         <td>Data</td>
    </tr>
</table>
</div>

Instead of using a <tr> try using an actual TH and style the TH the way you want it, leaving the 'plain' old <tr>'s alone.