0

这是示例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 会看起来很邋遢。

4

2 回答 2

1

这不是一个很好的解决方案，但它可能与您将获得的一样接近。如果您的行内容只占一行，它将偏离几个 px。它看起来足够接近 2 或 3 行。如果您的 line-height 与其他地方定义的不同，则需要调整绝对定位元素上的 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>
于 2013-04-16T15:37:09.937 回答
0

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

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

我变了top

于 2013-04-16T15:10:41.547 回答