<!--

Forum question answer only:

https://www.sitepoint.com/community/t/table-navigation-section-discussion/463137/3

-->
<section id="tablenav">
  <h3>Click to show a table: (under construction)</h3>
  <div id="tablenavwideandnarrow">
    <button onclick="showPrivateBanking()">Private Banking</button>
    <button onclick="showSovereignty()">Sovereignty</button>
    <button onclick="showA4V()">Debt Discharge</button>
    <button onclick="showDefense()">Civil &amp; Criminal Defense</button>
    <button onclick="showForms()">Forms</button>
    <button onclick="showAdminProcesses()">Administrative Processes</button>
    <button onclick="showNotaryPresentments()">Notary Presentments</button>
  </div>
  <div id="expandhide">
    <button onclick="hideTables()">Hide All Tables</button>
    <button onclick="expandTables()">Show Me Everything!</button>
  </div>
</section>

#tablenav {
  max-width: 1280px;
  margin: auto;
  text-align: center;
}
#tablenav button {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  margin: 0;
  flex: 0 0 260px;
  font-size: 1em;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  padding: 5px 0;
  border: 6px ridge #aa6420;
  background: linear-gradient(to bottom, #d99028 0%, #ca6c2b 100%);
  letter-spacing: 1px;
}
#tablenav button:hover {
  color: #ff6;
}
#tablenavwideandnarrow,
#expandhide {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
#expandhide {
  margin: 3rem 0;
  gap: 3rem 4rem;
}

#expandhide button {
  font-size: 1.2em;
  padding: 5px 1.1rem;
  flex: 0 0 320px;
  transition: 1s;
}
#expandhide button:first-of-type {
  background: linear-gradient(to bottom, #d62a2a 0%, #ce7b73 100%);
}
#expandhide button:first-of-type:hover {
  background: linear-gradient(to bottom, #ce7b73 0%, #d62a2a 100%);
}
#expandhide button + button {
  background: linear-gradient(to bottom, #64a020 0%, #8bbc67 100%);
}
#expandhide button + button:hover {
  background: linear-gradient(to bottom, #8bbc67 0%, #64a020 100%);
}

@media screen and (max-width: 400px) {
  #expandhide button {
    font-size: 1.1em;
    padding: 5px 5rem;
    flex: 0 0 280px;
  }
}