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>

问题是右列不位于行的中心。我可以在右侧放置删除按钮，如果它没有在中心对齐，那么UI看起来会很邋。。

Answer 1

这不是一个很好的解决方案，但它可能就像你将要获得的那样接近。如果您的行内容只占用一行，那么它将会关闭几行。它看起来足够接近2或3行。如果你有一个不同于其他地方定义的行高，你需要调整绝对定位元素的margin-top。

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

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

2 个答案: