Я создаю таблицу с использованием flexbox. Он имеет фиксированные заголовки и прокручиваемое тело. В Windows, когда полоса прокрутки добавляется в тело с помощью overflow-y: auto
, выравнивание по левому краю разрывается между заголовком и строками. Потому что на окнах панель прокрутки занимает некоторое дополнительное пространство от тела, но заголовок все равно получает одинаковое пространство. Есть ли способ сделать сжатие ширины заголовка, когда панель прокрутки добавляется в тело?Столбец таблицы Flexbox с левой стороны разбит на полосу прокрутки
Я хочу убедиться, что ширина заголовка и тела одинакова, когда имеется полоса прокрутки и даже когда она отсутствует.
&__item, &--header__item {
position: relative;
flex-basis: 20%;
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
&.sm, &.lg {
flex-grow: 0;
}
&.sm {
flex-basis: 40px;
}
}
<!-- Header HTML -->
<ul class="table-list-container">
<li class="table-list-row">
<ul class="table-list header">
<li class="table-list--header__item sm text-center">
</li>
<li class="table-list--header__item md-padding-left-10">
Header 1
</li>
<li class="table-list--header__item">
Header 2
</li>
<li class="table-list--header__item">
Header 3
</li>
<li class="table-list--header__item text-center">
Header 4
</li>
</ul>
</li>
</ul>
<!-- Body HTML -->
<div style="height: 305px" class="scrollable">
<ul class="table-list-container">
<li class="table-list-row">
<ul class="table-list body">
<li class="table-list__item sm text-center">
<input type="checkbox">
</li>
<li class="table-list__item md-padding-left-10">Data</li>
<li class="table-list__item">Data</li>
<li class="table-list__item">Data</li>
<li class="table-list__item text-center">Data</li>
</ul>
</li>
</ul>
</div>
Просьба предоставить минимальный, полный код. –
@SyamPillai Проверьте правильность изменения для кода – jarvis
Не могли бы вы воспроизвести это в кодефене или jsfiddle? – Norbert