overflow-y для таблицы
Можете пожалуйста добавить overflow-y: auto; в tbody, чтоб thead оставался на месте. Пытался сделать, но не работает скролл. Просто игнорируется. Убрал свои попытки скролл сделать, чтоб мусора небыло
body {
margin: 0;
background-image: url('https://i.yapx.ru/RR1P1.png');
background-repeat: no-repeat;
background-size: cover;
color: #4f4f4f;
font-family: sans-serif;
}
h1 {
font-size: 24px;
margin: 0;
}
a {
color: #fbfbfb;
text-decoration: none;
}
input.search {
width: 440px;
height: 34px;
font-size: 16px;
padding-left: 30px;
color: #4f4f4f;
border: 1px solid #a0a0a0;
border-radius: 4px;
background-image: url('https://i.yapx.ru/RR1P2.png');
background-repeat: no-repeat;
background-position: 5px center;
}
input.search::placeholder {
color: #a0a0a0;
}
input.search:hover {
background-color: #f7f7f7;
}
input.search:focus {
outline: none;
background-color: #f7f7f7;
}
button {
width: 200px;
height: 40px;
color: #fbfbfb;
background-color: #DF005B;
border: none;
cursor: pointer;
border-radius: 4px;
}
button:hover {
background-color: #c71a5f;
}
button:focus {
outline: none;
border: 3px solid #9c194d;
}
/* Nav */
.nav {
height: 84px;
margin: 9px 50px;
display: flex;
align-items: center;
justify-content: space-between;
}
.avatar {
width: 35px;
border-radius: 100%;
transform: translateY(10px);
margin-left: 7px;
}
/* Main */
.wrap {
max-width: 1100px;
margin: 0 auto;
max-height: 700px;
background-color: white;
padding: 24px 48px;
}
.title {
display: flex;
align-items: center;
justify-content: space-between;
}
.table {
width: 100%;
margin-top: 30px;
border-collapse: collapse;
}
td, th {
padding: 8px;
}
tr {
border: 1px solid #cacaca;
cursor: pointer;
}
tr:hover {
background-color: #f5f5f5;
}
td, th {
border-right: 1px solid #eeeeee;
}
th {
text-align-last: left;
font-weight: normal;
background-color: #fafafa;
font-size: 17px;
}
td {
font-size: 15px;
}
/* Footer */
.footer {
margin-top: 30px;
}
.info-item {
display: inline-block;
margin-right: 20px;
font-size: 15px;
color: #afafaf;
}
.black {
font-weight: bold;
color: black;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<title>Список DataBase</title>
</head>
<body>
<nav class="nav">
<div>
<a href=""><img src="img/logo.svg" alt="Logo" width="150"></a>
</div>
<div class="item">
<a href="">Sea#1475 <img src="https://i.yapx.ru/RR1Pq.png" alt="Avatar" class="avatar"> <img src="https://i.yapx.ru/RR1Po.png" alt=""></a>
</div>
</nav>
<main>
<article class="wrap">
<div class="title">
<div class="item">
<h1>База данных</h1>
</div>
<div class="item">
<input type="text" placeholder="Найти..." class="search">
</div>
<div class="item">
<button>ОБЪЯВИТЬ В РОЗЫСК</button>
<button>СОЗДАТЬ ЗАПИСЬ</button>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Сотрудник</th>
<th>Жетон</th>
<th>Структура</th>
<th>Задержанный</th>
<th>Паспорт</th>
<th>Статьи</th>
<th>Розыск</th>
<th>Под залог</th>
<th>Дата события</th>
</tr>
</thead>
<tbody>
<tr>
<td>6322</td>
<td>FIB - CTD - 142993</td>
<td>752</td>
<td>FIB</td>
<td>Roy Unicorn</td>
<td>34145</td>
<td>10.8</td>
<td>3</td>
<td>Да</td>
<td>2022-03-01 00:04:25</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
</tbody>
</table>
<footer class="footer">
<div class="info-item">Всего задержаний: <span class="black">7 267</span></div>
<div class="info-item">Задержаний за месяц: <span class="black">975</span></div>
<div class="info-item">Задержаний за день: <span class="black">10</span></div>
</footer>
</article>
</main>
</body>
</html>
Ответы (2 шт):
Автор решения: Проста Miha
→ Ссылка
Не знаю правильно ли я вас понял или нет, но вот моё решение
body {
margin: 0;
background-image: url('https://i.yapx.ru/RR1P1.png');
background-repeat: no-repeat;
background-size: cover;
color: #4f4f4f;
font-family: sans-serif;
}
h1 {
font-size: 24px;
margin: 0;
}
a {
color: #fbfbfb;
text-decoration: none;
}
input.search {
width: 440px;
height: 34px;
font-size: 16px;
padding-left: 30px;
color: #4f4f4f;
border: 1px solid #a0a0a0;
border-radius: 4px;
background-image: url('https://i.yapx.ru/RR1P2.png');
background-repeat: no-repeat;
background-position: 5px center;
}
input.search::placeholder {
color: #a0a0a0;
}
input.search:hover {
background-color: #f7f7f7;
}
input.search:focus {
outline: none;
background-color: #f7f7f7;
}
button {
width: 200px;
height: 40px;
color: #fbfbfb;
background-color: #DF005B;
border: none;
cursor: pointer;
border-radius: 4px;
}
button:hover {
background-color: #c71a5f;
}
button:focus {
outline: none;
border: 3px solid #9c194d;
}
/* Nav */
.nav {
height: 84px;
margin: 9px 50px;
display: flex;
align-items: center;
justify-content: space-between;
}
.avatar {
width: 35px;
border-radius: 100%;
transform: translateY(10px);
margin-left: 7px;
}
/* Main */
.wrap {
max-width: 1100px;
margin: 0 auto;
max-height: 700px;
background-color: white;
padding: 24px 48px;
overflow-y: scroll;
}
.title {
display: flex;
align-items: center;
justify-content: space-between;
}
.table {
width: 100%;
margin-top: 30px;
border-collapse: collapse;
}
.table thead {
position: sticky;
top: -24px;
}
td,
th {
padding: 8px;
}
tr {
border: 1px solid #cacaca;
cursor: pointer;
}
tr:hover {
background-color: #f5f5f5;
}
td,
th {
border-right: 1px solid #eeeeee;
}
th {
text-align-last: left;
font-weight: normal;
background-color: #fafafa;
font-size: 17px;
}
td {
font-size: 15px;
}
/* Footer */
.footer {
margin-top: 30px;
}
.info-item {
display: inline-block;
margin-right: 20px;
font-size: 15px;
color: #afafaf;
}
.black {
font-weight: bold;
color: black;
}
<body>
<nav class="nav">
<div>
<a href=""><img src="img/logo.svg" alt="Logo" width="150"></a>
</div>
<div class="item">
<a href="">Sea#1475 <img src="https://i.yapx.ru/RR1Pq.png" alt="Avatar" class="avatar"> <img src="https://i.yapx.ru/RR1Po.png" alt=""></a>
</div>
</nav>
<main>
<article class="wrap">
<div class="title">
<div class="item">
<h1>База данных</h1>
</div>
<div class="item">
<input type="text" placeholder="Найти..." class="search">
</div>
<div class="item">
<button>ОБЪЯВИТЬ В РОЗЫСК</button>
<button>СОЗДАТЬ ЗАПИСЬ</button>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Сотрудник</th>
<th>Жетон</th>
<th>Структура</th>
<th>Задержанный</th>
<th>Паспорт</th>
<th>Статьи</th>
<th>Розыск</th>
<th>Под залог</th>
<th>Дата события</th>
</tr>
</thead>
<tbody>
<tr>
<td>6322</td>
<td>FIB - CTD - 142993</td>
<td>752</td>
<td>FIB</td>
<td>Roy Unicorn</td>
<td>34145</td>
<td>10.8</td>
<td>3</td>
<td>Да</td>
<td>2022-03-01 00:04:25</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
</tbody>
</table>
<footer class="footer">
<div class="info-item">Всего задержаний: <span class="black">7 267</span></div>
<div class="info-item">Задержаний за месяц: <span class="black">975</span></div>
<div class="info-item">Задержаний за день: <span class="black">10</span></div>
</footer>
</article>
</main>
</body>
Автор решения: Danila
→ Ссылка
Решение с position: sticky, которое предложил Просто Miha, очень интересное, но в нём есть нюанс: при скролле пропадает хедер с кнопками и поле поиска. Чтобы этого не происходило, можно использовать две таблицы - одну как thead, а другую - как tbody. Единственное, что при таком решении нужно задавать явную ширину ячейкам, чтобы они не съезжали в разных таблицах относительно друг друга:
.thead {
overflow-y: scroll;
min-width: 1300px;
}
.thead td {
font-weight: bold;
}
.tbody {
height: 280px;
overflow-y: scroll;
min-width: 1300px;
position: relative;
top: -1px;
}
.table {
width: 100%;
border-collapse: collapse;
}
.table td {
padding: 5px;
border: 1px solid silver;
width: 10%;
word-break: break-word;
}
.table td:nth-child(1),
.table td:nth-child(3),
.table td:nth-child(6),
.table td:nth-child(8),
.table td:nth-child(9){
width: 4%;
}
<div class="thead">
<table class="table">
<tr>
<td>#</td>
<td>Сотрудник</td>
<td>Жетон</td>
<td>Структура</td>
<td>Задержанный</td>
<td>Паспорт</td>
<td>Статьи</td>
<td>Розыск</td>
<td>Под залог</td>
<td>Дата события</td>
</tr>
</table>
</div>
<div class="tbody">
<table class="table">
<tr>
<td>6322</td>
<td>FIB - CTD - 142993</td>
<td>752</td>
<td>FIB</td>
<td>Roy Unicorn</td>
<td>34145</td>
<td>10.8</td>
<td>3</td>
<td>Да</td>
<td>2022-03-01 00:04:25</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
<tr>
<td>6325</td>
<td title="[LSCSD-SRT-135767], [LSCSD-SRT-135767]">[LSCSD-SRT-135767], [L...</td>
<td>661</td>
<td>LSCSD</td>
<td>Lay Halseys</td>
<td>41574</td>
<td>10.8, 12.7</td>
<td>4</td>
<td>Да</td>
<td>2022-03-01 08:15:32</td>
</tr>
</table>
</div>