php - 右列固定的表格

Question

我想要一个具有固定列 的表格。我想修复右栏。我找到了一个脚本来修复最左边的列。我使用该代码修复了最右边的列。

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是该脚本的演示。

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

有什么办法可以解决这个问题吗？

Answer 1

使用 float: right 为右列创建 CSS 样式； display:block 应该可以解决问题