Мне только что ответили на вопрос, который решил почти все: у меня есть три части, которые я хотел отредактировать отдельно, и теперь, когда я помещаю две другие части обратно, они включаются в раздел моей таблицы и скорее прокручивают таблицу чем застревать под таблицей.
Страница должна выглядеть следующим образом:
-Header (приложение APP для одной страницы)
-Table пользователей
Номер страницы и нумерация страниц
Редактировать пользователя -Новый пользователь, рядом друг с другом в двух столбцах. Я не могу найти или не уверен, как исследовать этот конкретный c тип вопроса.
MY CSS:
.my-custom-scrollbar {
position: relative;
height: 500px;
overflow: auto;
}
.table-wrapper-scroll-y {
display: block;
}
th {
background: #67c8f5;
position: sticky;
top: 0px;
}
.table {
border-collapse: separate;
}
my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="myScript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="utf-8">
<title>Users</title>
<meta name="description" content="APP Web Task 5">
<meta name="author" content="SitePoint">
</head>
<!--Text body-->
<body>
<!--header-->
<header class="container jumbotron text-center">
<h2>APP Single Page App</h2>
</header>
<!--Section 1, table-->
<div class="container">
<section id="sectUsers">
<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table id="tblUsers" class="table table-striped table-bordered table-fixed">
<!--Table header-->
<thead class="table table-bordered table-primary table-striped text-center">
<tr id="tblUserHeader">
<th scope="col">User ID</th>
<th scope="col">Email</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Avatar</th>
</tr>
</thead>
<!--Table body-->
<tbody class="table table-bordered">
<tr id="user1">
<td scope="row"><b>1</b></td>
<td>george.bluth@reqres.in</td>
<td>George</td>
<td class="w3-center">Bluth</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user2">
<td scope="row"><b>2</b></td>
<td>janet.weaver@reqres.in</td>
<td>Janet</td>
<td class="w3-center">Weaver</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user3">
<td scope="row"><b>3</b></td>
<td>emma.wong@reqres.in</td>
<td>Emma</td>
<td class="w3-center">Wong</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user4">
<td scope="row"><b>4</b></td>
<td>eve.holt@reqres.in</td>
<td>Eve</td>
<td class="w3-center">Holt</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user5">
<td scope="row"><b>5</b></td>
<td>charles.morris@reqres.in</td>
<td>Charles</td>
<td>Morris</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user6">
<td scope="row"><b>6</b></td>
<td>tracey.ramos@reqres.in</td>
<td>Tracey</td>
<td>Ramos</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
</tbody>
</div>
</section>
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active">
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
<!--Section two, Edit User-->
<section id="sectUser" >
<div >
<h2 >User</h2>
<div >
<img id="userAvatar" src="https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" alt="avatar">
<form id="frmUser" >
<label>User ID:</label>
<input type="text" id="userID">
<br>
<label>Email:</label>
<input type="text" id="userEmail">
<br>
<label>First Name:</label>
<input type="text" id="userFirstName">
<br>
<label>Last Name:</label>
<input type="text" id="userLastName">
<div >
<button id="btnSaveUser" >Save Changes</button>
<button id="btnDeleteUser" >Delete User</button>
</div>
</form>
</div>
</div>
</section>
<!--Section three, Add new user-->
<section id="sectNewUser" >
<div >
<h2 >New User</h2>
<div >
<form id="frmNewUser" >
<label>Username:</label>
<input type="text" id="userName">
<br>
<label>Job:</label>
<input type="text" id="userJob">
<br>
<div >
<button id="btnNewUser" >New User</button>
</div>
</form>
</div>
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>