Question

我想要一张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是该脚本的演示。

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

有没有办法解决这个问题？

Answer 1

尝试设置min-height和max-height

Answer 2

使用 float：right 为正确的列创建CSS样式; 显示：阻止应解决问题

具有固定右列的表

2 个答案: