css - react-table tbody 不可垂直滚动
问题描述
我正在使用 react-table 以及样式化的组件,并尝试使 tbody 可滚动并带有粘性主题。我尝试为父容器设置高度,然后将 tbody overflow-y 设置为 auto,但是这种方法不起作用。我究竟做错了什么?
const TableContainerOuter = styled.div`
width: 100%;
height: 100%;
overflow-y: hidden;
padding-bottom: 21px;
`;
const TableContainer = styled.div`
width: 100%;
height: 300px;
min-width: 900px;
`;
const StyledTable = styled.table`
width: 100%;
position: relative;
height: 30px;
border-spacing: 0px;
th {
position: sticky;
top: 0;
left: 0;
background: #f3f4f5;
font-size: 9px;
font-weight: 500;
line-height: 230%;
letter-spacing: 0.05em;
color: ${(props) => props.theme.pbDarker};
text-transform: uppercase;
text-align: left;
padding: 6px 0px;
user-select: none;
&:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
padding-left: 22px;
}
&:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
}
tbody {
overflow-y: scroll;
height: 100px;
}
td {
padding: 16px 0px;
border-style: solid;
border-width: 0px;
font-size: 12px;
font-weight: 400;
border-bottom-width: 1px;
border-color: ${(props) => props.theme.pbFaded1};
min-width: 95px;
:first-of-type {
padding-left: 22px;
}
}
`;
解决方案
你没有应用溢出。你可以看看你是否检查你的桌子。将溢出添加到您的 TableContainer 中,它将起作用。往下看
const TableContainer = styled.div`
width: 100%;
height: 100px;
min-width: 900px;
overflow-y: scroll;
`;
推荐阅读
- swift - 当 Int 为零和负零时定义一个符号
- mongodb - 我应该如何使用 mgo 处理 UUID 字段?
- javascript - 无法启动离子应用程序
- google-apps-script - copyTo 函数仅在第二次通过时工作,有一个小问题
- haskell - 什么是 package.yaml & stack.yaml & Setup.hs & the-project-name.cabal 文件?
- javascript - 如何使用 HTML、CSS 和 JS 制作表单(没有 jQuery 和引导程序)
- python - 在命令行返回状态,而 cap.isOpened()
- java - 为什么Java中的以下语句打印“2 + 2 = 22”而不是“2 + 2 = 4”
- animation - 用颤振制作动画在水龙头上弹跳
- c# - Matrikon OPC 服务器和 ASP.NET MVC 应用程序