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

user_4609855 0
Viewed 275

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:

Example

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;
}
sticky vertical-alignment css html
4 Answers

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

Setting the tr to position:relative; and then positioning the last td absolute worked for me.

Just added

margin-top: auto;
margin-bottom: auto;
bottom: 0;
top:0;

enter image description here

user_118780690

It's not possible because of tr element not support position. There is 2 way to create a table using div element(How create table only using <div> tag and Css) or second way put some jquery code for sticky td element.

$('.zui-sticky-col').each(function(){
var prev_td = $(this).prev('td').outerHeight();
$(this).height(prev_td);
});
user_115993910

You can use this code

body {
            margin: 0;
            padding: 0;
        } 
        .zui-table {
            border: none;
            border-right: solid 1px #DDEFEF;
            border-collapse: separate;
            border-spacing: 0;
            font: normal 13px Arial, sans-serif;
            width: 1000px;
            max-width: 100%;
        }
        .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;
            margin: 0 auto;
            width: 1140px;
        }
        .zui-scroller {
            margin-right: 141px;
            overflow-x: scroll;
            overflow-y: visible;
            padding-bottom: 5px;
            width: 82%;
        }
        .zui-table .zui-sticky-col {
            border-left: solid 1px #DDEFEF;
            border-right: solid 1px #DDEFEF;
            right: 0;
            position: absolute;
            top: auto;
            width: 184px;
            display: flex;
            flex: 1;
            align-items: center;
            justify-content: center;
            background-color: #21dcdc;
        }
<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>

user_120564340
Related