固定的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; 
}