0
固定テーブルのヘッダーを徹底的に調査した結果、私はこれを実行するかなり良い方法を見つけました。しかし、私は完全にクロスブラウザに対応する必要があります。IEでのCSSスタイリングの問題を解決した見出しテーブル
私はこれが何をするために別の方法を探し求めていました。私は立ち往生しています。
以下のコードでは、しかし、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>
を更新しました。あなたはテキストの間の主導権を指しているのか、実際の色の格差を指していますか?ヘッダー行の後ろにテーブルの先頭行(.headalign)を隠すことはあなたの意図ですか? – Scott
申し訳ありませんが、私はより良い説明ができました。基本的に各
答えて
これはどのように----->JSBin demo
私はすべての絶対位置を削除しましたヘッダー行を削除し、#container divにある1.6emの上部のパディングを削除します。あなたは基本的に、上部に1.6emsのスペースを追加してから、そのスペースをカバーするためにテーブルを動かしました。説明できない理由がなければ、それには何の指摘もありませんでした。
は、あなたが "ホワイトスペース" によって何を意味するか説明JSBin ------->HERE
と
出典
2011-12-16 14:23:53 Scott
問題固定長の見出しを含めるように求められましたが、それぞれの列とデータが異なるページ(約30件)をあまりにも多く編集する必要はなく、かなり大きなテーブルがあります。絶対値はそれを固定したもので、固定された見出しによって覆われているデータを補償したもので、まだ見えています。 –
ウィンドウが広い場合を除き、データはコード内で引き続きカバーされます。画面サイズが小さくなると頭上のdivが表示されるので、最初に質問したのです。残念ながら、回避する必要があるより多くのコードがある場合、針対干し草の問題です。 – Scott
完全なコードのペーストがここにあります... http://jsbin.com/axuluk/2/edit、それはあなたがリフレッシュまたはリロードするまで、固定ヘッダーのサイズが変更される場所ですが、奇妙な動作をします。そこには、コードが正しく表示されるときに見出しに覆われていません。それは描画ボードに戻ってのケースかもしれないと思う –
関連する問題