关于css sticky粘性问题?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Sidebar Example</title>
<style>
.table-container {
display: block;
max-width: 300px;
max-height: 400px; /* 根据需要调整 */
overflow: auto;
}
.header-row {
display: flex;
position: sticky;
top: 0;
background-color: #f8f8f8;
z-index: 1;
}
.header-cell,
.cell {
min-width: 80px;
padding: 8px;
border: 1px solid #ddd;
}
.header-cell {
font-weight: bold;
}
.cell-fixed {
position: sticky;
left: 0;
background-color: #f8f8f8;
z-index: 1;
}
.table-body {
display: block;
}
.row{
display: flex;
}
</style>
</head>
<body>
<div class="table-container">
<div class="header-row">
<div class="header-cell header-fixed">Header 1</div>
<div class="header-cell">Header 2</div>
<div class="header-cell">Header 3</div>
<div class="header-cell">Header 4</div>
<div class="header-cell">Header 5</div>
<div class="header-cell">Header 6</div>
<div class="header-cell">Header 7</div>
<!-- 更多头部单元格 -->
</div>
<div class="table-body">
<div class="row">
<div class="cell cell-fixed">Row 1</div>
<div class="cell">Data 2</div>
<div class="cell">Data 3</div>
<div class="cell">Data 4</div>
<div class="cell">Data 5</div>
<div class="cell">Data 6</div>
<div class="cell">Data 7</div>
<!-- 更多数据单元格 -->
</div>
<!-- 更多行 -->
</div>
</div>
</body>
</html>
左右滑动时可以粘住在左边,但是左右滚动超过300px就不粘住了,求解
回复
1个回答

test
2024-06-18
可以这样改一下试下:
.table-body {
display: flex;
}
粘性元素会“粘”到其最近的具有“滚动机制”的祖先元素,但只会在他所处的 table-body 容器里生效,table-body 的宽度需要变成非固定的
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容