IEでのCSSスタイリングの問題を解決した見出しテーブル

Question

固定テーブルのヘッダーを徹底的に調査した結果、私はこれを実行するかなり良い方法を見つけました。しかし、私は完全にクロスブラウザに対応する必要があります。

私はこれが何をするために別の方法を探し求めていました。私は立ち往生しています。

以下のコードでは、しかし、IEでそのI見出しの間に空白がある（ずれリンクは、大規模な問題ではありませんが、同時に迷惑している）限り、私はテストすることができるようFFに

の作品スタイルを維持しながら取り除くことはできません。これはIE6に戻ってくるはずですが、私たちのほとんどはIE8以上であり、どこにでも同じ問題があります。

スクロールがうまく動作するので、貼り付けられたテーブルは、データが長いために使用する必要があるサンプルに過ぎません。 16px margin-rightは、表示されるスクロールバーを補正することです。

アイデアをお待ちしております。

スタイリング（それを圧縮するための謝罪）

<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; 
}