冻结右侧表列，按其他单元格居中对齐单元格内容

Question

下面是http://jsfiddle.net/DvxPc/1/示例

body { font:16px Calibri;}
table { border-collapse:separate; border-top: 3px solid grey; }
td {
    margin:0;
    border:3px solid grey; 
    border-top-width:0px; 
    white-space:nowrap;
}
div { 
    width: auto; 
    overflow-x:scroll;  
    margin-right:5em; 
    overflow-y:visible;
    padding-bottom:1px; 
}
.headcol {
    position:absolute; 
    width:5em; 
    right:0;
    top:auto;
    border-right: 0px none black; 
    border-top-width:3px; /*only relevant for first row*/
    margin-top:-3px; /*compensate for top border*/
}
.long { background:yellow; letter-spacing:1em; }

<div><table>
    <tr><td class="headcol">X</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> <td>llaldlfasd<br/>fasdf</td> </tr>
</table></div>

问题是右列没有位于行的中心。我将能够把删除按钮放在右边，如果它不是对齐在中心，那么用户界面将看起来懒散。

Answer 1

这不是一个很好的解决方案，但它可能是您将获得的最接近的解决方案。如果您的行内容只占一行，它将减少几个像素。它看起来足够接近2到3行。如果您的行高与其他地方定义的行高不同，则需要在绝对定位的元素上调整上边距。

http://jsfiddle.net/DvxPc/5/

    body { font:16px Calibri;}
    table { border-collapse:separate; border-top: 3px solid grey; }
    td {
        margin:0;
        border:3px solid grey; 
        border-top-width:0px; 
        white-space:nowrap;
    }
    div { 
        width: auto; 
        overflow-x:scroll;  
        margin-right:5em; 
        overflow-y:visible;
        padding-bottom:1px; 
    }
    span {
        border: 1px solid;
        position:absolute; 
        width:5em; 
        right:0;
        margin-top: -.7em;
        box-sizing: border-box;
    }
    .long { background:yellow; letter-spacing:1em; }

注意，我在这里添加了一个额外的元素。这是被定位的东西，而不是包含它的td。

<div><table>
    <tr><td><span>X</span></td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> <td>llaldlfasd</td></tr>
    <tr><td><span>X</span></td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> <td>llaldlfasd<br/>fasdf</td> </tr>
    <tr><td><span>X</span></td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> <td>llaldlfasd<br/>fasdf</td> </tr>
    <tr><td><span>X</span></td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> <td>llaldlfasd<br/>fasdf</td> </tr>
    <tr><td><span>X</span></td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> <td>llaldlfasd<br/>fasdf<br/>fasdf</td> </tr>
</table></div>

Answer 2

如果我理解得很好你想要这样的东西吗？

http://jsfiddle.net/DvxPc/2/

我更改了top