html中表格水平和垂直滚动,表头垂直不动,可以水平滚动，大神们请问怎么实现啊？

Posted 2023-04-01

参考技术A 用两个table，一个做表头，一个放内容追问

放内容的滚动条，要把水平滚动条拉到最右边才看的到，怎么解决

追答

结构大概是这样的

这样的结构在水平方向出现滚动条的时候，两个table都会跟着水平滚动。

在水平滚动表格中垂直溢出表格单元格

【中文标题】在水平滚动表格中垂直溢出表格单元格

【英文标题】：Overflow a table cell vertically in a horizontally scrollable table

【发布时间】：2020-05-09 19:29:21

【问题描述】：

我正在尝试扩展一个 React 下拉组件并使其在表格之外可见。表格必须是水平滚动的。 我正在使用 react-dropdown-select 组件。 这是我为指出问题而制作的 Codepen (https://codesandbox.io/s/great-banach-48yt5)

更改外部 Div 属性

overflow: auto

到

overflow-x: auto;
overflow-y: visible

不起作用。注明在：https://***.com/a/6433475/9358897

有什么想法吗？

【参考方案1】：

如果您坚持使用 react-dropdown-select 包，请it has an option 在portal 中呈现下拉菜单。

在你的 index.html 中，在你的根目录上方创建一个新元素：

<div id="portal"></div>
<div id="root"></div>

并将其作为道具传递给您的 Select：

<Select
  style= width: "150px" 
  dropdownHeight="120px"
  dropdownPosition="top"
  options=options
  labelField="username"
  valueField="email"
  portal=document.getElementById("portal")
/>

Working example