固定的CSS樣式表中的樣式問題在IE

Question

經過對固定表頭的深入調查後，我偶然發現了一個很好的方法來完成此操作。但是，我必須使其完全跨瀏覽器兼容。

我已經搜索過高和低的另一種方式來做到這一點，並且我來了stummped。

下面的代碼在FF的作品，據我可以測試（錯位的鏈接是不是一個巨大的問題，但在同一時間很煩人）

然而，在IE中存在的標題之間的空白，我在保持風格的同時不能出現擺脫。這應該回到IE6，但我們大多數人都在IE8和以上，並且到處都有相同的問題。

滾動工作正常，所以粘貼的表格只是我必須使用的樣本，因爲數據很長。 16px的邊距 - 右側是爲了補償滾動條的出現。

任何想法將不勝感激。

造型（道歉壓縮它）

<style type="text/css"> 
* { 
    padding:0; 
    margin:0; 
} 
table { 
    width:100%; 
    color: #000; 
    font-size: 0.9em; 
    text-align:center; 
    vertical-align:middle; 
    vertical-align:center; 
} 
th { 
    font-weight:bold; 
    text-align:left; 
} 
.container { 
    position:relative; 
    padding:1.6em 0 0 0; 
    width:80%; 
    background:#fff; 
    margin:0 auto; 
} 
.scroll { 
    overflow:auto; 
    overflow-x:hidden; 
    height:19.6em; 
} 
.container thead tr { 
    position:absolute; 
    top:0; 
    margin-right:16px; 
    background:#fff; 
} 
.container th, .container td { 
    width:100em; 
} 
td { 
    background:#e5f1f4; 
    border-bottom: 1px solid #ccc; 
    padding: 1px 5px; 
    text-align:center; 
    vertical-align: middle; 
    height:100%; 
} 
th { 
    background:#328aa4; 
    color:#fff; 
    border-top: 3px double #ccc; 
    border-bottom: 3px double #ccc; 
    font-variant: small-caps; 
    letter-spacing: 0.1em; 
    text-align:center; 
} 
tr.alt td { 
    background-color: #f8fbfc; 
} 
tfoot { 
    display:none; 
} 
table a:visited, table a:active, table a:link { 
    text-decoration: none; 
    color: black; 
    display: block; 
} 
table a:hover { 
    text-decoration: none; 
    color: black; 
    background-color: #B0E2FF; 
    display: block; 
} 
div.headalign { 
    text-align: left; 
    font-style:italic; 
} 
</style> 

頁代碼

<div class="container"> 
<div class="scroll"> 

<table cellspacing="0" cellpadding="0" class="myTable"> 
    <thead> 
     <tr> 
      <th><p>Product Code</p></th> 
      <th><p>Design Name</p></th> 
      <th><p>Ricoh</p></th> 
      <th><p>Nashuatec</p></th> 
      <th><p>Rex Rotary</p></th> 
      <th><p>Gestetner</p></th> 
      <th><p>Infotec</p></th> 
      <th><p>Lanier</p></th> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr> 
      <th><p>Product Code</p></th> 
      <th><p>Design Name</p></th> 
      <th><p>Ricoh</p></th> 
      <th><p>Nashuatec</p></th> 
      <th><p>Rex Rotary</p></th> 
      <th><p>Gestetner</p></th> 
      <th><p>Infotec</p></th> 
      <th><p>Lanier</p></th> 
     </tr> 
    </tfoot> 
    <tbody> 
     <tr> 
      <td colspan="8"><div class="headalign"><a href="../contents/af1022_1027.htm"> 1022/1027/1032, 2022/2027/2032 series</a></div></td> 
     </tr> 
     <tr> 
      <td><a href="../contents/af1022_1027.htm">B022</a></td> 
     <td><a href="../contents/af1022_1027.htm">Russian C2a</a></td> 
     <td><a href="../contents/af1022_1027.htm"> 1022</a></td> 
     <td><a href="../contents/af1022_1027.htm">2205</a></td> 
     <td><a href="../contents/af1022_1027.htm">2238</a></td> 
     <td><a href="../contents/af1022_1027.htm">2212</a></td> 
     <td><a href="../contents/af1022_1027.htm">IS 2022</a></td> 
     <td><a href="../contents/af1022_1027.htm">5622</a></td> 
    </tr> 
    <tr> 
     <td><a href="../contents/af1022_1027.htm">B027</a></td> 
     <td><a href="../contents/af1022_1027.htm">Russian C2b</a></td> 
     <td><a href="../contents/af1022_1027.htm"> 1027</a></td> 
     <td><a href="../contents/af1022_1027.htm">2705</a></td> 
     <td><a href="../contents/af1022_1027.htm">2738</a></td> 
     <td><a href="../contents/af1022_1027.htm">2712</a></td> 
     <td><a href="../contents/af1022_1027.htm">IS 2027</a></td> 
     <td><a href="../contents/af1022_1027.htm">5627</a></td> 
    </tr> 
</tbody> 
</table> 
</div> 
</div> 

Answer 1

這個怎麼樣----->JSBin demo

我所做的只是刪除絕對定位標題行，並刪除#container div上的1.6em頂部填充。您基本上在頂部添加1.6ems的空間，然後將桌子向上移動以覆蓋該空間。除非有一些無法解釋的理由，否則沒有意義。

更新JSBin ------->HERE

.container thead tr { 
    position:absolute; 
    top:0; 
    width: 100%; /* <---- this line added and right: 300; was removed ---- */ 
margin-right:16px; 
background:#fff; 
} 

和

th { 
background:#328aa4; 
color:#fff; 
    padding: 2px 0; /* <---- This Line added to compensate for white space below header row.----- */ 
border-top: 3px double #ccc; 
border-bottom: 3px double #ccc; 
/* padding: 1px 5px;*/ 
font-variant: small-caps; 
letter-spacing: 0.1em; 
/* padding-left:10px; 
padding-right:10px;*/ 
text-align:center; 
}