Vertical alignement of a 'sticky' column when height: auto?

Question

I'm trying to center a sticky column on its vertical axis. The column is fixed to the right of the table

JSFiddle to illustrate my issue

And a screenshot illustrating it:

You can see that for the sticky td's (in lightblue) Kentucky and Kansas, they don't fill the entire height of the row. (and setting height:100% doesn't work).

The problem is that in my requirements the height of the non sticky td has to be set automatically and the development must be compatible with IE11.

How can I center vertically the sticky td with the entire tr ?

the HTML code:

<div class="zui-wrapper">
    <div class="zui-scroller">
        <table class="zui-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Number</th>
                    <th>Position</th>
                    <th>Height</th>
                    <th>Born</th>
                    <th>Salary</th>
                    <th>Salary</th>
                    <th>Salary</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>DeMarcus Cousins</td>
                    <td>15</td>
                    <td>C</td>
                    <td>6'11"</td>
                    <td>08-13-1990</td>
                    <td>$4,917,000</td>
                    <td>$4,917,000</td>
                    <td>$4,917,000
                    $4,917,000<br>
                    $4,917,000<br>
                    $4,917,000</td>
                    <td class="zui-sticky-col">Kentucky/USA</td>
                </tr>
                <tr>
                    <td>Isaiah Thomas</td>
                    <td>22</td>
                    <td>PG</td>
                    <td>5'9"</td>
                    <td>02-07-1989</td>
                    <td>$473,604</td>
                    <td>$473,604</td>
                    <td>$473,604</td>
                    <td class="zui-sticky-col">Washington/USA</td>
                </tr>
                <tr>
                    <td>Ben McLemore</td>
                    <td>16</td>
                    <td>SG</td>
                    <td>6'5"</td>
                    <td>02-11-1993</td>
                    <td>$2,895,960</td>
                    <td>$2,895,960</td>
                    <td>$2,895,960</td>
                    <td class="zui-sticky-col">Kansas/USA</td>
                </tr>
                <tr>
                    <td>Marcus Thornton</td>
                    <td>23</td>
                    <td>SG</td>
                    <td>6'4"</td>
                    <td>05-05-1987</td>
                    <td>$7,000,000</td>
                    <td>$7,000,000</td>
                    <td>$7,000,000</td>
                    <td class="zui-sticky-col">Louisiana State/USA</td>
                </tr>
                <tr>
                    <td>Jason Thompson</td>
                    <td>34</td>
                    <td>PF</td>
                    <td>6'11"</td>
                    <td>06-21-1986</td>
                    <td>$3,001,000</td>
                    <td>$3,001,000</td>
                    <td>$3,001,000</td>
                    <td class="zui-sticky-col">Rider/USA</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

And its CSS:

.zui-table {
    border: none;
    border-right: solid 1px #DDEFEF;
    border-collapse: separate;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
    background-color: #DDEFEF;
    border: none;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
    white-space: nowrap;
}
.zui-table tbody td {
    height: auto;
    border-bottom: solid 1px #DDEFEF;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
    white-space: nowrap;
}
.zui-table tbody tr {
    background-color: lightgrey;
}
.zui-wrapper {
    position: relative;
}
.zui-scroller {
    margin-right: 141px;
    overflow-x: scroll;
    overflow-y: visible;
    padding-bottom: 5px;
}
.zui-table .zui-sticky-col {
    border-left: solid 1px #DDEFEF;
    border-right: solid 1px #DDEFEF;
    right: 0;
    position: absolute;
    top: auto;
    width: 120px;
    display: flex;
    flex: 1;
    align-items:center;
    justify-content:center;
}

Answer 1

Use Position: Sticky instead of Position: Absolute. Transform: translate3d(0,0,0) is used to give better support on iOS device. Example: https://codepen.io/pratikmalvi/pen/gOOpzzK

.zui-table .zui-sticky-col {
    background-color: lightblue;
    height: auto;
    border-left: solid 1px #DDEFEF;
    border-right: solid 1px #DDEFEF;
    right: 0;
    width: 120px;
    position: sticky;
    right: 0;
    top: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}