Как предотвратить создание прокручиваемой таблицы пробелов внизу в родительском контейнере? ⇐ Python

[Anonymous]

Я работаю с Python и jinja2, чтобы создать отчет, содержащий таблицу. Вот соответствующие классы CSS:

Код: Выделить всё

    .alignment-table {
white-space: nowrap;
font-family: monospace;
background-color: #DCDCDC;
text-align: left;
border-collapse: separate;
border-spacing: 0;
}
.alignment-table th, .alignment-table td {
border: 0.5px solid black;
}
.alignment-table-container {
max-height: 75vh;
position: relative;
overflow:scroll;
}
.sticky-col {
background-color: #DCDCDC;
position: sticky;
left: 0;
z-index: 9;
display: flex;
align-self: flex-start;
}
.sticky-row {
background-color: #DCDCDC;
position: sticky;
top: 0;
z-index: 10;
}
.sequence-info {
position: relative;
display: inline-block;
cursor: pointer;
}
.sequence-info .sequence-info-text {
cursor: pointer;
visibility: hidden;
text-align: left;
position: absolute;
left: 100%;
margin-left: 10px;
}
.ruler {
padding: 0px;
margin: 0px;
border: 0px;
text-align: left;
}
.nucleotideA {
color: green;
}
.nucleotideC {
color: blue;
}
.nucleotideG {
color: black;
}
.nucleotideT {
color: red;
}
.box {
display: grid;
padding: 20px;
background-color: white;
border-radius: 10px;
margin: 20px 0;
width: auto;
background-color: #DCDCDC;
}

Вот соответствующий шаблон jinja2:

Код: Выделить всё

        {% for assay in report_data.assays %}





{{ assay.name }} Alignment

Show



{% for key, value in report_data.assay_summary_info[assay.name].items()%}


{{key}}

{{ value }}


{% if key == 'Mismatches' %}

{% endif %}
{% endfor %}







ID
{{ report_data.ruler_ticks[assay.name] }}
{{ report_data.ruler_numbers[assay.name] }}



{%- for seq in assay.alignment -%}



{{ seq.id }}



{% if seq.id != assay.name%}
{{ assay.name }} :
{% endif %}
{{ seq.id }}




{{ seq.description }}

{% if assay.flat_mismatches[seq.id] %}



Mismatches:

{{ assay.flat_mismatches[seq.id] }}


{% for key, value in assay.mismatches[seq.id].items() %}


{{ report_data.mtype_user_values[key] }} mismatches:

{{ value }}


{% endfor %}

{% endif %}





{%-for nucleotide in seq.sequence -%}
{{-nucleotide-}}
{%- endfor -%}


{% endfor %}




{% endfor %}

Вот снимок экрана с пробелами под таблицей внутри .alignment-table-container:
табличное пространство внутри родительского контейнера
Изменить:
Вот сгенерированный HTML по запросу. Сами строки таблицы содержат последовательности ДНК, и каждый нуклеотид в последовательности содержит свой собственный тег диапазона для раскраски, поэтому я исключил строки таблицы. Весь сгенерированный HTML-файл занимает 18 тыс. строк, поэтому я не размещал его здесь целиком.

Код: Выделить всё

ID
▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾▾|▾▾▾
10        20        30        40        50        60        70        80        90        100       110       120       130       140       150       160       170       180       190       200       210       220       230       240       250       260       270       280       290       300       310       320       330       340       350       360       370       380       390       400       410       420       430       440       450       460       470       480       490       500       510       520       530       540       550       560       570       580       590       600       610       620       630       640       650       660       670       680       690       700       710       720       730       740       750       760       770       780       790       800       810       820       830       840       850       860       870       880       890       900       910       920       930       940       950       960       970       980       990       1000      1010      1020      1030      1040      1050

Будем благодарны за любую помощь.
Инструмент проверки показывает, что пространство принадлежит .alignment-table-container.
Я пробовал разные вещи, такие как изменение свойств min-height, max-height, overflow для .alignment-table-container, но не смог устранить пробел.
Версия Python — 3.11.9
Версия Jinja2 — 3.1.4
Браузер — Google Chrome версии 129.0.6668.100 (официальная сборка) (x86_64)

Подробнее здесь: https://stackoverflow.com/questions/790 ... h-in-its-p