表頭的頂部和底部邊框消失

每當用戶向下滾動表格時，表格標題的頂部和底部邊界都會消失。一旦用戶到達表格的底部，
表格標題的頂部和底部邊框將重新出現。你如何解決這個問題？我正在使用IE7，並需要代碼來符合該特定的瀏覽器。

<!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>

來源

2013-03-11 John Smith

請參閱本。分離你的html/css/javascript，並請使用小提琴http://stackoverflow.com/questions/how-to-ask – 2013-03-11 04:02:08

Hai我剛剛在下面修改了你的CSS代碼，請試試這個。

table thead { 
    position:fixed; 

} 
table thead tr { 
    position: relative; 

}

來源

2013-03-11 04:32:00 Krishnaram

仍然是相同的結果。 – 2013-03-11 14:24:41

第二天玩弄一些CSS的一套新的眼睛，下面的作品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>

來源

2013-03-11 14:45:38

表頭的頂部和底部邊框消失

回答

相關問題