I want to implement a scroll table with a fix column in left side.
but I meet a problem, the fix dom can’t fixed.
just like the picture show below.
enter image description here
enter image description here
how to fix the red text in left side when scroll to right.
the table also can scroll to up and down.
here is my code
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrapper{
width: 400px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}
.container {
width: 1000px;
overflow-y: auto;
overflow-x: hidden;
height: 150px;
}
.list {
white-space: nowrap;
width: 1000px;
}
.list span {
display: inline-block;
width: 50px;
line-height: 50px;
}
.fix {
position: sticky;
left: 0px;
background: red;
color: white;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="list">
<span class="fix">TEXT 1</span>
<span>TEXT 2</span>
<span>TEXT 3</span>
<span>TEXT 4</span>
<span>TEXT 5</span>
<span>TEXT 6</span>
<span>TEXT 7</span>
<span>TEXT 8</span>
<span>TEXT 9</span>
<span>TEXT 10</span>
</div>
<div class="list">
<span class="fix">TEXT 1</span>
<span>TEXT 2</span>
<span>TEXT 3</span>
<span>TEXT 4</span>
<span>TEXT 5</span>
<span>TEXT 6</span>
<span>TEXT 7</span>
<span>TEXT 8</span>
<span>TEXT 9</span>
<span>TEXT 10</span>
</div>
<div class="list">
<span class="fix">TEXT 1</span>
<span>TEXT 2</span>
<span>TEXT 3</span>
<span>TEXT 4</span>
<span>TEXT 5</span>
<span>TEXT 6</span>
<span>TEXT 7</span>
<span>TEXT 8</span>
<span>TEXT 9</span>
<span>TEXT 10</span>
</div>
<div class="list">
<span class="fix">TEXT 1</span>
<span>TEXT 2</span>
<span>TEXT 3</span>
<span>TEXT 4</span>
<span>TEXT 5</span>
<span>TEXT 6</span>
<span>TEXT 7</span>
<span>TEXT 8</span>
<span>TEXT 9</span>
<span>TEXT 10</span>
</div>
<div class="list">
<span class="fix">TEXT 1</span>
<span>TEXT 2</span>
<span>TEXT 3</span>
<span>TEXT 4</span>
<span>TEXT 5</span>
<span>TEXT 6</span>
<span>TEXT 7</span>
<span>TEXT 8</span>
<span>TEXT 9</span>
<span>TEXT 10</span>
</div>
</div>
</div>
</body>
</html>
>Solution :
Just adjust something like this, your problem is use overflow for .wrapper and wrong overflow attribute for .container class.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 400px;
overflow:auto;
height: 150px;
}
.list {
white-space: nowrap;
}
.list span {
display: inline-block;
width: 50px;
line-height: 50px;
}
.fix {
position: sticky;
left: 0px;
background: red;
color: white;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="list">
<span class="fix">TEXT 1</span>
<span>TEXT 2</span>
<span>TEXT 3</span>
<span>TEXT 4</span>
<span>TEXT 5</span>
<span>TEXT 6</span>
<span>TEXT 7</span>
<span>TEXT 8</span>
<span>TEXT 9</span>
<span>TEXT 10</span>
</div>
<div class="list">
<span class="fix">TEXT 1</span>
<span>TEXT 2</span>
<span>TEXT 3</span>
<span>TEXT 4</span>
<span>TEXT 5</span>
<span>TEXT 6</span>
<span>TEXT 7</span>
<span>TEXT 8</span>
<span>TEXT 9</span>
<span>TEXT 10</span>
</div>
<div class="list">
<span class="fix">TEXT 1</span>
<span>TEXT 2</span>
<span>TEXT 3</span>
<span>TEXT 4</span>
<span>TEXT 5</span>
<span>TEXT 6</span>
<span>TEXT 7</span>
<span>TEXT 8</span>
<span>TEXT 9</span>
<span>TEXT 10</span>
</div>
<div class="list">
<span class="fix">TEXT 1</span>
<span>TEXT 2</span>
<span>TEXT 3</span>
<span>TEXT 4</span>
<span>TEXT 5</span>
<span>TEXT 6</span>
<span>TEXT 7</span>
<span>TEXT 8</span>
<span>TEXT 9</span>
<span>TEXT 10</span>
</div>
<div class="list">
<span class="fix">TEXT 1</span>
<span>TEXT 2</span>
<span>TEXT 3</span>
<span>TEXT 4</span>
<span>TEXT 5</span>
<span>TEXT 6</span>
<span>TEXT 7</span>
<span>TEXT 8</span>
<span>TEXT 9</span>
<span>TEXT 10</span>
</div>
<div class="list">
<span class="fix">TEXT 1</span>
<span>TEXT 2</span>
<span>TEXT 3</span>
<span>TEXT 4</span>
<span>TEXT 5</span>
<span>TEXT 6</span>
<span>TEXT 7</span>
<span>TEXT 8</span>
<span>TEXT 9</span>
<span>TEXT 10</span>
</div>
<div class="list">
<span class="fix">TEXT 1</span>
<span>TEXT 2</span>
<span>TEXT 3</span>
<span>TEXT 4</span>
<span>TEXT 5</span>
<span>TEXT 6</span>
<span>TEXT 7</span>
<span>TEXT 8</span>
<span>TEXT 9</span>
<span>TEXT 10</span>
</div>
<div class="list">
<span class="fix">TEXT 1</span>
<span>TEXT 2</span>
<span>TEXT 3</span>
<span>TEXT 4</span>
<span>TEXT 5</span>
<span>TEXT 6</span>
<span>TEXT 7</span>
<span>TEXT 8</span>
<span>TEXT 9</span>
<span>TEXT 10</span>
</div>
<div class="list">
<span class="fix">TEXT 1</span>
<span>TEXT 2</span>
<span>TEXT 3</span>
<span>TEXT 4</span>
<span>TEXT 5</span>
<span>TEXT 6</span>
<span>TEXT 7</span>
<span>TEXT 8</span>
<span>TEXT 9</span>
<span>TEXT 10</span>
</div>
<div class="list">
<span class="fix">TEXT 1</span>
<span>TEXT 2</span>
<span>TEXT 3</span>
<span>TEXT 4</span>
<span>TEXT 5</span>
<span>TEXT 6</span>
<span>TEXT 7</span>
<span>TEXT 8</span>
<span>TEXT 9</span>
<span>TEXT 10</span>
</div>
<div class="list">
<span class="fix">TEXT 1</span>
<span>TEXT 2</span>
<span>TEXT 3</span>
<span>TEXT 4</span>
<span>TEXT 5</span>
<span>TEXT 6</span>
<span>TEXT 7</span>
<span>TEXT 8</span>
<span>TEXT 9</span>
<span>TEXT 10</span>
</div>
<div class="list">
<span class="fix">TEXT 1</span>
<span>TEXT 2</span>
<span>TEXT 3</span>
<span>TEXT 4</span>
<span>TEXT 5</span>
<span>TEXT 6</span>
<span>TEXT 7</span>
<span>TEXT 8</span>
<span>TEXT 9</span>
<span>TEXT 10</span>
</div>
<div class="list">
<span class="fix">TEXT 1</span>
<span>TEXT 2</span>
<span>TEXT 3</span>
<span>TEXT 4</span>
<span>TEXT 5</span>
<span>TEXT 6</span>
<span>TEXT 7</span>
<span>TEXT 8</span>
<span>TEXT 9</span>
<span>TEXT 10</span>
</div>
</div>
</div>
</body>
</html>