如何在 Semantic-UI-React 中使表格可滚动？使用 Next.js

Question

我有一个宽表，当我使用 Grid 组件并在移动设备上将其宽度设置为 16 时，我得到了一个奇怪的结果

我会提供一个我在做的工作的网址，请忽略网站细节，这并不重要，重要的是每个组件在移动视图中都是响应式的，除了被拉伸的表格。请在手机上查看并放大以了解我的意思：

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

我想要达到的结果是表格像其他组件一样适合移动视图并且可以滚动（用户将进行左右滑动动作以查看更多详细信息）。

完美的结果会像这个网站一样：

https://coingecko.com

您可以看到那里的一切都是响应式的，并且表格可以滚动。

我想有一种方法可以通过某种方式利用增强来使用 Semantic-UI-React

 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>