Управление прокруткой таблиц

#html #css

#HTML #css

Вопрос:

Здесь у меня есть два <table> :

(внизу серое поле — это полоса прокрутки.)

одна из них представляет собой таблицу с длинным текстом, другая — таблицу с несколькими th и td ,

а вот css для таблиц:

 table {
  table-layout: fixed;
  width: 100%;

  border-collapse: collapse;
  display: block;
  max-width: -moz-fit-content;
  overflow-x: auto;
  white-space: normal;
}
  

Я в порядке с форматом второй таблицы; поскольку по горизонтали много ячеек, ее следует сохранять как прокручиваемую,

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

Как я могу реализовать эти две функции одновременно?