Question

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

我将提供我正在进行的工作的URL，请忽略网站详细信息，这并不重要，重要的是，除拉伸表外，每个组件在移动视图中都响应。请在移动设备上查看并放大以了解我的意思：

我想获得的结果是表格可以像其他组件一样适合移动视图并可以滚动（用户将左右滑动以查看更多细节）。

完美的结果将类似于此网站：

您会看到那里的所有内容都可以响应，并且表格可以滚动。

我想语义语义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 class="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 */ 
}

希望这会有所帮助