具有固定右列的表格答案

【问题标题】：Table with fixed right column具有固定右列的表格
【发布时间】：2012-10-31 14:07:16
【问题描述】：

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

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

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

【问题讨论】：

标签： php css html-table

【解决方案1】：

尝试设置min-height和max-height

【讨论】：

【解决方案2】：

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

【讨论】：

在您的演示中，右列与其他列共享相同的 div 和 headcol 样式。例如，仅应用于右列的 RightCol 样式可能会起作用。