Css 如何使表格在语义UI中可滚动?使用Next.js

Css 如何使表格在语义UI中可滚动?使用Next.js,css,reactjs,responsive-design,semantic-ui,semantic-ui-react,Css,Reactjs,Responsive Design,Semantic Ui,Semantic Ui React,我有一张很宽的桌子,当我在移动设备上使用网格组件并将其宽度设为16时,我得到了一个奇怪的结果 我将提供一个我的工作在过程中的网址,请忽略网站的细节,这并不重要,重要的是,每个组件都是在移动视图响应,除了表是拉伸。请在手机上查看并放大它以了解我的意思: 我想要实现的结果是,该表与其他组件一样适合移动视图,并且可以滚动(用户将进行左右滑动以查看更多细节) 完美的结果如下所示: 您可以看到,那里的一切都响应良好,并且表格可以滚动 我想有一种方法可以让语义用户界面通过某种方式利用扩展来做出反应 i

我有一张很宽的桌子,当我在移动设备上使用网格组件并将其宽度设为16时,我得到了一个奇怪的结果

我将提供一个我的工作在过程中的网址,请忽略网站的细节,这并不重要,重要的是,每个组件都是在移动视图响应,除了表是拉伸。请在手机上查看并放大它以了解我的意思:

我想要实现的结果是,该表与其他组件一样适合移动视图,并且可以滚动(用户将进行左右滑动以查看更多细节)

完美的结果如下所示:

您可以看到,那里的一切都响应良好,并且表格可以滚动

我想有一种方法可以让语义用户界面通过某种方式利用扩展来做出反应

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

 Table as={*some sort of styled div} 
但我尝试了几个风格各异的div,但没有成功,例如:

style={{overflow: 'auto'}}

您可以创建一个具有高度的div容器,并将表放在其中

Css

Html



这对我有用!请更改“您还可以直接提及要使其可滚动的表格的具体高度:
.container__table {
  height: 290px;
  overflow-y: scroll;  /* or auto */
}
  <div className="container__table">                                        
     <--- your table --->
  </div>