Question

Как заставить компонент React, содержащий растущую таблицу HTML, оставаться в пределах предполагаемых максимальных размеров?

У меня есть приложение React, в котором есть компонент с именем Scoreboard. Этот компонент содержит таблицу HTML, в которую отображаются новые строки (при достижении новых высоких баллов). Я не хочу, чтобы компонент Scoreboard выходил за его пределы, поэтому я определил для него max-height:

.Scoreboard {
    max-height: 60vh;
    margin-bottom: 5vh;
    max-width: 50vh;
    display: table;
    margin: 0 auto;
    margin-bottom: 3vh;
    overflow: hidden;
}

Но это не работает так, как я планировал. Scoreboard продолжает неограниченно расширяться по мере добавления новых строк в таблицу. Что мне нужно сделать, чтобы заставить компонент оставаться в пределах предполагаемых максимальных размеров? Переполнение должно оставаться скрытым.

Теперь, когда я об этом думаю, было бы разумно программно игнорировать лишние данные и даже не пытаться добавить их в таблицу после достижения максимального количества. Тем не менее, было бы неплохо научиться некоторым CSS, чтобы решить эту проблему.

bonnopc · Answer 1 · 04 апреля 2020

Сначала сделайте container div этой таблицы. Например,

<div className="container">
    <Scoreboard {...props} />
</div>

Затем добавьте максимальную высоту для этого контейнера в CSS.

.container {
    max-height: 60vh;
    overflow-y: auto; // this is important for scrolling to the bottom of the table 
}

Я надеюсь, что таким образом вы сможете показать динамическую таблицу c в ограниченная высота.

Как заставить компонент React, содержащий растущую таблицу HTML, оставаться в пределах предполагаемых максимальных размеров?