当高度为auto时，如何垂直对齐“粘性”列？

Question

当高度为auto时，如何垂直对齐“粘性”列？

htmlcssvertical-alignmentsticky

6

我正在尝试将一个粘性列在其垂直轴上居中。该列固定在表格的右侧。 JSFiddle以说明我的问题以下是一张说明截图：

您可以看到，对于粘性单元格（浅蓝色），如Kentucky和Kansas，它们并没有填满整个行的高度。（设置height:100%也无效）

问题在于，根据我的要求，非粘性单元格的高度必须自动设置，并且开发必须与IE11兼容。

如何使粘性单元格与整个行垂直居中？

HTML代码如下：

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

并且它的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;
}

- Dipiks

4个回答

0

你可以使用这段代码

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>

- Piyush Teraiya

当我点击“运行代码片段”时似乎无法工作。 - Dipiks

0

将tr的样式设置为position:relative;，然后将最后一个td绝对定位即可。

刚刚添加了。

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

- davidev

1

请问您能分享一下修改后的 jsfiddle 吗？ - Dipiks

0

不可能实现，因为 tr 元素不支持定位。有两种方法可以使用 div 元素创建表格（使用 <div> 标签和 CSS 创建表格的方法），或者第二种方法是通过添加一些 jQuery 代码使 td 元素粘滞在页面上。

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

- Keyur Gajjar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pratik Malvi · Accepted Answer

使用Position: Sticky代替Position: Absolute。Transform: translate3d(0,0,0)用于在iOS设备上提供更好的支持。 示例：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);
}