极客观点
项目管理
HarmonyOS
<!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就不粘住了，求解
可以这样改一下试下：
粘性元素会“粘”到其最近的具有“滚动机制”的祖先元素，但只会在他所处的 table-body 容器里生效，table-body 的宽度需要变成非固定的