I recently had an issue resolved that fixed most of my concerns: I needed to make three separate edits, and now when I reintroduce the other two edits, they are included within the table section and scroll along with the table instead of being stuck beneath it.
The layout I'm aiming for is as follows:
-Header (APP Single Page App)
-Table of Users
-Page number and pagination
-Edit User -New User, side by side in two columns. I haven't been able to locate information on this specific type of question.
Here is how my CSS looks:
.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;
}
This is my HTML structure:
<!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>
<!--Body content goes here-->
<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><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c5b59534e5b59125e504948547c4e594d4e594f125552">[email protected]</a></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>
<!-- Additional user rows go here -->
</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 details -->
<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 form -->
<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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90e0ffe0e0f5e2befae3d0a1bea1a6bea0">[email protected]</a>/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>