Я сделал страницу html javascript. Проблема, с которой я сталкиваюсь:
На моей странице есть 2 полосы прокрутки, при прокрутке внутренней полосы прокрутки, соответствующей моей таблице, я хочу, чтобы заголовки таблицы оставались фиксированными, а строки должен двигаться вниз по мере их перемещения.
Я хочу, чтобы заголовок таблицы оставался фиксированным, чтобы в любое время пользователь мог видеть заголовок имен столбцов для любой строки.
При прокрутке На внешней полосе прокрутки такого требования нет.
Есть ли способ сделать это?
вот мой код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.content {
padding: 15px 40px;
overflow: auto;
height: 565px;
}
#abc {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#abc td, #abc th {
border: 2px solid #ddd;
padding:8px;
}
#abc td {
padding-left:20px;
font-size:14px;
}
#abc tr:nth-child(even){background-color: #f2f2f2;}
#abc tr:hover {background-color: #ddd;}
#abc th {
padding-top: 12px;
padding-bottom: 10px;
text-align: center;
background-color: #000000b3;
color: #FFFFFF;
}
#abc td + td {
text-align: center;
}
</style>
</head>
<body>
<div>
<p>Here is my code.
Here is my code.
Here is my code.
Here is my code.
Here is my code.
</p>
<p>
Here is my code.
<br/>
Here is my code.
</p>
<p>Here is my code.</p>
<div>
<div>
<div class="content">
<table id="abc" style="width:100%" >
<div>
<thead>
<tr>
<th width="10%">column_1 </th>
<th width="60%">column_2 </th>
<th width="20%">column_3 </th>
<th width="10%">column_4 </th>
</tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
</thead>
</div>
<tbody>
</tbody>
</table>
<p>
Here is my code.
<br/>
Here is my code.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
С уважением