我有一个要求,需要显示类似于具有水平滚动功能的固定第一列的表格。
该列在一段时间内保持固定,但当您滚动太多时,它会开始随其他内容移动:
.wrapper {
width: 250px;
overflow: auto;
display: flex;
flex-direction: column;
position: relative;
}
.header-container, .row-data {
display: flex;
position: relative;
}
.header, .data {
flex: 0 0 80px;
padding: 1rem;
background-color: lightblue;
}
.fullname {
position: sticky;
left: 0;
background-color: orange;
}
<div class="container">
<div class="wrapper">
<div class="header-container">
<div class="header fullname">Full Name</div>
<div class="header">Test 1</div>
<div class="header">Test 2</div>
<div class="header">Test 3</div>
<div class="header">Test 4</div>
</div>
<div class="data-container">
<div class="row-data">
<div class="data fullname">Full Name</div>
<div class="data">Test 1</div>
<div class="data">Test 2</div>
<div class="data">Test 3</div>
<div class="data">Test 4</div>
</div>
<div class="row-data">
<div class="data fullname">Full Name</div>
<div class="data">Test 1</div>
<div class="data">Test 2</div>
<div class="data">Test 3</div>
<div class="data">Test 4</div>
</div>
</div>
</div>
</div>
如何在不使用带来自身问题的<table>标签的情况下将第一个“Full Name”列固定?