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: right为右列创建 CSS 样式 display:block应该可以解决问题

于 2012-11-12T06:04:24.523 回答
0

尝试设置min-height和max-height

于 2012-11-12T05:38:14.873 回答