Freeze table column on the right side and align cell content by center of other cells

Question

Here is example 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>

The problem is right column doesnt located on center of row. I will be able to place delete button on right side and if it is not align on center then UI will look slovenly.

Answer 1

This is not a great solution, but it's probably about as close as you're going to get. If your row contents only take up a single line, it will be off by a couple px. It looks close enough for 2 or 3 lines. If you have a different line-height than this defined elsewhere, you'll need to adjust the margin-top on the absolutely positioned element.

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; }

Note that I've added an extra element here. This is what's being positioned, not the td that contains it.

<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>