position:fixed
position:sticky
<nav class="nav"> <div class="title"> <h4><a href="#">Map</a></h4> </div> <ul class="nav-links"> <li> <a href="#"> HOME</a> </li> <li> <a href="#">ABOUT </a> </li> <li> <a href=""> MAP</a> </li> <li> <a href="#">Chronology</a> </li> <li> <a href="#">CONTACT</a> </li> </ul> <div class="humberger"> <div class="line line1"></div> <div class="line line2"></div> <div class="line line3"></div> </div> </nav> </div> <div class="chronology-title"> <h1 class="capital">Chronology</h1> </div> <div class="chronology-table"> <table> <tr> <th>date</th> <th>location</th> <th>victim</th> <th>cause of death</th><th>info</th> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td></td> </tr> What I have tried: CSS for nav bar: <pre lang="CSS">.nav { /* padding: 20px; */ display:flex; justify-content: space-between; align-items: center; background-color: rgba(212, 190, 188); min-height: 10vh; position: fixed; width:100%; /* right:0; left: 0; */ z-index:200; padding:0 30px; } .humberger { position:relative; width: 50px; height: 40px; display:none; padding-left:30px; top:10px; } .humberger div { width: 25px; height: 2px; margin: 5px auto; background-color: #000000; } .nav-links { display: flex; justify-content:space-around; align-items: center; /* position:relative; */ /* right:15%; */ width: 70%; } .nav-links li { list-style: none; margin-right: 30px; padding: 20px 0px; font-size: 26px; font-weight: 600; white-space: nowrap; /* font-family: 'Merienda', cursive; */ text-transform: uppercase; text-align:center; } .nav-links li a { text-decoration: none; color: #000000; position: relative; transition: color 0.2s ease; } .nav-links li a::after { content:''; position: absolute; background-color: #fff; height: 3px; width: 0; left: 0; bottom: -5px; transition: all 0.4s ease; } .nav-links li a:hover { color: #fff; } .nav-links li a:hover::after { width: 100%; }
.chronology-table { margin: 20px 100px 40px 100px; } table { border-collapse: collapse; } th { position:sticky; /* position: -webkit-sticky; */ top:-1px; padding:10px; font-size:20px; border:1px solid black; background-color:rgba(220, 224, 193); text-transform: capitalize; } th::before { content:''; position:absolute; top: 0; left: 0; width:100%; height: 100%; } table td { padding: 5px 10px; border: solid 1px black; }
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)