I need your help.

Whenever the user scrolls down the table, both the top and bottom borders of the table header disappear. Once the user reaches the bottom of the table,  

the top and bottom borders of the table header re-appear. How do you fix this? I am using IE7 and need the code to compliant to that particular browser.

```
<!DOCTYPE html>
<html>
<head>

<style type="text/css">

/*------------------------------------------------------------------
Table Style
------------------------------------------------------------------ */
table a:link {
    color: #666;
    font-weight: bold;
    text-decoration:none;
}
table a:visited {
    color: #999999;
    font-weight:bold;
    text-decoration:none;
}
table a:active,
table a:hover {
    color: #bd5a35;
    text-decoration:underline;
}
table {
    font-family:Arial, Helvetica, sans-serif;
    color:#666;
    font-size:12px;
    background:#eaebec;
    border-radius:3px;
    border-collapse:collapse; border-spacing: 0; 
    box-shadow: 0 1px 2px #d1d1d1;
}
table th {
    padding:10px 10px 10px 10px;
    border-top:1px solid #ccc;
    _border-bottom:1px solid #ccc;
    border-right: 1px solid #ccc;
    background: #ededed;
}   
table tr {
    text-align: center;
}   
table td {
    padding:10px;
    border-bottom:1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    background: #fafafa;
}   
table tr:hover td {
    background: #f2f2f2;
}
table th, table td {
    width: 160px; 
}
#container {
    width: 740px;
    height: 300px;
    overflow-x: scroll;
    overflow-y: scroll;
    border-left: 1px solid #ccc;
}
table tr td:first-child, table tr th:first-child {
    border-left: 0;
}
table thead {
    _position:fixed;
    position: relative;
}
table thead tr {
    position: relative;
    top: expression(this.offsetParent.scrollTop);
}
table tr:first-child td {
    border-top: 1px solid #ccc;
}
</style>

</head>

<body>

<div id="container">

<table id="data">

    <!-- Table Header -->
    <thead>
        <tr>
            <th>Task Details</th>
            <th>Firstname</th>
            <th>Progress</th>
            <th>Vital Task</th>
        </tr>
    </thead>
    <!-- Table Header -->

    <!-- Table Body -->
    <tbody>

        <tr>
            <td>Create pretty table design</td>
            <td>&nbsp;</td>
            <td>100%</td>
            <td>Yes</td>
        </tr><!-- Table Row -->

        <tr>
            <td>Take the dog for a walk</td>
            <td>&nbsp;</td>
            <td>100%</td>
            <td>Yes</td>
        </tr><!-- Darker Table Row -->

        <tr>
            <td>Waste half the day on Twitter</td>
            <td>&nbsp;</td>
            <td>20%</td>
            <td>No</td>
        </tr>

        <tr>
            <td>Feel inferior after viewing Dribble</td>
            <td>&nbsp;</td>
            <td>80%</td>
            <td>No</td>
        </tr>

        <tr>
            <td>Wince at &quot;to do&quot; list</td>
            <td>&nbsp;</td>
            <td>100%</td>
            <td>Yes</td>
        </tr>

        <tr>
            <td>Vow to complete personal project</td>
            <td>&nbsp;</td>
            <td>23%</td>
            <td>yes</td>
        </tr>

        <tr>
            <td>Procrastinate</td>
            <td>&nbsp;</td>
            <td>80%</td>
            <td>No</td>
        </tr>

        <tr>
            <td><a href="#yep-iit-doesnt-exist">Hyperlink Example</a></td>
            <td>&nbsp;</td>
            <td>80%</td>
            <td><a href="#inexistent-id">Another</a></td>
        </tr>

    </tbody>
    <!-- Table Body -->

</table>

</div>

</body>
</html>

```