带固定右列的表格

我想要一张有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>

Here是脚本的演示。

问题是，当我以不同的分辨率查看此页面或更改浏览器的缩放级别时，最右列的位置发生更改。

有什么办法解决这个问题吗？谢谢！

来源

2012-11-12 Ashwini Agarwal

尝试设置min-height和max-height

来源

2012-11-12 05:38:14 vick

您可以请显示任何演示或代码？ –

创建右列的CSS样式与浮动：权; 显示：块应该解决问题

来源

2012-11-12 06:04:24

试过了，但没有奏效。演示 - http://jsfiddle.net/AbjVy/1/ –

在您的演示中，右列与其他列共享相同的div和headcol样式。例如，像RightCol风格的东西，只适用于右列可能工作。 –

带固定右列的表格

回答

相关问题