CODEWITHSUNDEEP
htmlcsshtml-tableinternet-explorer-7
John Smith
John Smith

Reputation: 1687

Top and Bottom Borders of the Table Header Disappear

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>

Upvotes: 1

Views: 3938

Answers (2)

John Smith
John Smith

Reputation: 1687

After playing around with some of the css with a new set of eyes the next day, the following works for IE7:

<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;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
table th {
    padding:10px 10px 10px 10px;
    border-bottom:1px solid #ccc;
    border-left: 1px solid #ccc;
    background: #ededed;
}   
table tr {
    text-align: center;
}   
table td {
    padding:10px;
    border-bottom:1px solid #ccc;
    border-left: 1px solid #ccc;

    background: #fafafa;
}   
table tr:hover td {
    background: #f2f2f2;
}
table th, table td {
    width: 160px; 
}
#container {
    width: 800px;
    height: 300px;
    overflow-x: scroll;
    overflow-y: scroll;
}
table tr td:first-child, table tr th:first-child {
    border-left: 0;
}

table thead {
    position:fixed;

}

TABLE THEAD TR TH {
    top:expression(this.offsetParent.scrollTop);
    border-top:1px solid #ccc;
    position:relative;
}

table tr:first-child td {
    border-top: 0;
}
</style>

Upvotes: 1

Krishnaram
Krishnaram

Reputation: 11

Hai I just modified your CSS code right below please try this.

table thead {
    position:fixed;

}
table thead tr {
    position: relative;

}

Upvotes: 0

Related Questions