Как сделать таблицу с возможностью прокрутки в Semantic-UI-React? Использование Next.js

Question

У меня широкая таблица, когда я использую компонент Grid и задаю для него ширину 16 на мобильном устройстве, я получаю странный результат

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

https://exodia -client-oatx5x9ug.now.sh /

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

Идеальный результат будет таким же, как вэтот веб-сайт:

https://coingecko.com

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

Я думаю, что есть способ сделать это с помощью Semantic-UI-Реагировать, используя каким-либо образом увеличение

 import { Table } from "semantic-ui-react";

 Table as={*some sort of styled div} 

Но я попробовал пару стилей div без успеха, например:

style={{overflow: 'auto'}}

Answer 1

Вы можете создать контейнер div с высотой и поместить таблицу внутрь.

Css

.container__table {
  height: 290px;
  overflow-y: scroll;  /* or auto */
}

Html

  <div className="container__table">                                        
     <--- your table --->
  </div>

Answer 2

Сначала вы должны установить max-width, а затем установить свойство overflow-x, чтобы присутствовала горизонтальная прокрутка. Как это:

.table {   
  max-width: 500px /* sample width. adjust this */   
  overflow-x: scroll /* this provides the horizontal scroll */ 
}

Надеюсь, это поможет