0

のテーブルが欲しいFixed Column。右カラムを固定したい。一番左の列を修正するスクリプトを見つけました。そのコードを使用して、一番右の列を修正しました。

HTML

<div><table>
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="headcol">Row 1</td></tr>
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="headcol">Row 2</td></tr>
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="headcol">Row 3</td></tr>
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="headcol">Row 4</td></tr>
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="headcol">Row 5</td></tr>
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="headcol">Row 6</td></tr>
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="headcol">Row 7</td></tr>
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="headcol">Row 8</td></tr>
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="headcol">Row 9</td></tr>
</table></div>

CSS

div {
    width: 600px;
    overflow-x:scroll;  
    margin: 0 auto;
}
.headcol {
    position:absolute;
    width:5em;
    left: 820px;
}
.long { background:yellow; letter-spacing:1em; }
</style>

これがそのスクリプトのデモです。

問題は、このページを別の解像度で表示したり、ブラウザーのズーム レベルを変更したりすると、一番右の列の位置が変更されることです。

この問題を解決する方法はありますか?

4

2 に答える 2

0

floatを使用して右側の列のCSSスタイルを作成します:right ; display:blockは問題を解決するはずです

于 2012-11-12T06:04:24.523 に答える
0

設定min-heightしてみて、max-height

于 2012-11-12T05:38:14.873 に答える