Вертикальное выравнивание «липкого» столбца при высоте: авто? - PullRequest
Новая
       14

Вертикальное выравнивание «липкого» столбца при высоте: авто?

5 голосов
/ 09 октября 2019

Я пытаюсь центрировать липкий столбец на его вертикальной оси. Столбец зафиксирован справа от таблицы

JSFiddle, чтобы проиллюстрировать мою проблему

И снимок экрана, иллюстрирующий ее:

Example

Вы можете видеть, что для липких тд (в светло-голубых) Кентукки и Канзас они не заполняют всю высоту ряда. (и установка высоты: 100% не работает).

Проблема заключается в том, что в моих требованиях высота non-sticky td должна быть установлена ​​автоматически, и разработка должна быть совместима с IE11 .

Как я могу вертикально центрировать липкий тд со всем tr?

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

Ответы [ 4 ]

2 голосов
/ 09 октября 2019

Использовать Положение: Липкий вместо Позиции: Абсолют. 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);
}
0 голосов
/ 10 октября 2019

Вы можете использовать этот код 

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>
0 голосов
/ 09 октября 2019

Это невозможно, поскольку элемент tr не поддерживает позицию. Существует 2 способа создания таблицы с использованием элемента div ( Как создать таблицу только с использованием тега

) или второй способ поместить некоторый код jquery для липкого элемента td. 

$('.zui-sticky-col').each(function(){
var prev_td = $(this).prev('td').outerHeight();
$(this).height(prev_td);
});
0 голосов
/ 09 октября 2019

Установка tr в position:relative; и последующее позиционирование последнего абсолютного td сработало для меня.

Только что добавлено 

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

enter image description here

...