如何实现滚动时Table的thead与固定顶部Navbar保持固定对齐？

Hey there! Let's fix that sticky table header issue you're having alongside your fixed navbar. I've looked at your code and here's a clean, reliable solution that keeps both elements fixed without breaking your layout or existing functionality:

The Core Problem with Your Previous Attempts #

• Wrapping the navbar + thead in a div locked your page because it likely restricted overflow or forced a fixed height, preventing natural scrolling.
• Making the tbody scrollable breaks layout because it decouples the header and body column widths, leading to misalignment.
• Using position: fixed on the thead removes it from the document flow, so it no longer matches the tbody's column sizing.

The Solution: Use position: sticky for the Table Header #

Sticky positioning keeps the element in the document flow (so column widths stay aligned) while fixing it to the top once you scroll past it. We just need to account for the fixed navbar's height so the header doesn't slide under it.

Step 1: Add Custom CSS

Add this to your stylesheet (or a <style> tag in the <head>):

/* Give space for the fixed navbar so content doesn't get hidden */
body {
  padding-top: 76px;
}

/* Make the table header stick below the navbar */
.table-sticky-header thead th {
  position: sticky;
  top: 56px; /* Matches Bootstrap's default navbar height */
  background-color: #ffffff; /* Ensure header covers content behind it */
  z-index: 100; /* Keep header above table body content */
}

/* Adjust for mobile when navbar collapses */
@media (max-width: 991.98px) {
  body {
    padding-top: 132px;
  }
  .table-sticky-header thead th {
    top: 112px; /* Adjust to match collapsed navbar height */
  }
}

Step 2: Update Your Table HTML

Add the table-sticky-header class to your table element:

<table id="myTable" class="table table-striped table-hover tablesorter table-sticky-header">
  <!-- Remaining table content stays the same -->
</table>

Step 3: Remove the Manual Line Breaks

You can delete the <br><br> after the navbar—our padding-top on the body handles spacing much more cleanly.

Full Modified Code #

Here's the complete working code with the fix applied:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
  <style>
    body {
      padding-top: 76px;
    }
    .table-sticky-header thead th {
      position: sticky;
      top: 56px;
      background-color: #ffffff;
      z-index: 100;
    }
    @media (max-width: 991.98px) {
      body {
        padding-top: 132px;
      }
      .table-sticky-header thead th {
        top: 112px;
      }
    }
  </style>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
 <a class="navbar-brand" href="#">Navbar</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse" id="navbarSupportedContent">
 <ul class="navbar-nav mr-auto">
 <li class="nav-item active">
 <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">Link</a>
 </li>
 </ul>
 <form class="form-inline my-2 my-lg-0">
 <input id="myInput" onkeyup="myFunction()" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
 </form>
 </div>
</nav>

<table id="myTable" class="table table-striped table-hover tablesorter table-sticky-header">
 <thead>
 <tr>
 <th scope="col">Status</th>
 <th scope="col">Computer</th>
 <th scope="col">IP Address</th>
 <th scope="col">MAC</th>
 </tr>
 </thead>
 <tbody id="myTableSearch">
 <tr>
 <td><span class="badge badge-success">Online</span></td>
 <td>Computer 1</td>
 <td>192.168.1.21</td>
 <td>92:41:04:FF:15:EB</td>
 </tr>
 <tr>
 <td><span class="badge badge-danger">Offline</span></td>
 <td>Computer 2</td>
 <td>192.168.1.22</td>
 <td>5C:3B:C8:EA:6C:3A</td>
 </tr>
 <tr>
 <td><span class="badge badge-success">Online</span></td>
 <td>Computer 3</td>
 <td>192.168.1.23</td>
 <td>BD:2D:94:8A:63:83</td>
 </tr>
 <tr>
 <td><span class="badge badge-success">Online</span></td>
 <td>Computer 4</td>
 <td>192.168.1.24</td>
 <td>9C:D7:16:1F:0B:A3</td>
 </tr>
 <tr>
 <td><span class="badge badge-danger">Offline</span></td>
 <td>Computer 5</td>
 <td>192.168.1.25</td>
 <td>05:C4:95:A6:B2:E6</td>
 </tr>
 <tr>
 <td><span class="badge badge-success">Online</span></td>
 <td>Computer 1</td>
 <td>192.168.1.21</td>
 <td>92:41:04:FF:15:EB</td>
 </tr>
 <tr>
 <td><span class="badge badge-danger">Offline</span></td>
 <td>Computer 2</td>
 <td>192.168.1.22</td>
 <td>5C:3B:C8:EA:6C:3A</td>
 </tr>
 <tr>
 <td><span class="badge badge-success">Online</span></td>
 <td>Computer 3</td>
 <td>192.168.1.23</td>
 <td>BD:2D:94:8A:63:83</td>
 </tr>
 <tr>
 <td><span class="badge badge-success">Online</span></td>
 <td>Computer 4</td>
 <td>192.168.1.24</td>
 <td>9C:D7:16:1F:0B:A3</td>
 </tr>
 <tr>
 <td><span class="badge badge-danger">Offline</span></td>
 <td>Computer 5</td>
 <td>192.168.1.25</td>
 <td>05:C4:95:A6:B2:E6</td>
 </tr>
 <tr>
 <td><span class="badge badge-success">Online</span></td>
 <td>Computer 1</td>
 <td>192.168.1.21</td>
 <td>92:41:04:FF:15:EB</td>
 </tr>
 <tr>
 <td><span class="badge badge-danger">Offline</span></td>
 <td>Computer 2</td>
 <td>192.168.1.22</td>
 <td>5C:3B:C8:EA:6C:3A</td>
 </tr>
 <tr>
 <td><span class="badge badge-success">Online</span></td>
 <td>Computer 3</td>
 <td>192.168.1.23</td>
 <td>BD:2D:94:8A:63:83</td>
 </tr>
 <tr>
 <td><span class="badge badge-success">Online</span></td>
 <td>Computer 4</td>
 <td>192.168.1.24</td>
 <td>9C:D7:16:1F:0B:A3</td>
 </tr>
 <tr>
 <td><span class="badge badge-danger">Offline</span></td>
 <td>Computer 5</td>
 <td>192.168.1.25</td>
 <td>05:C4:95:A6:B2:E6</td>
 </tr>
 <tr>
 <td><span class="badge badge-success">Online</span></td>
 <td>Computer 1</td>
 <td>192.168.1.21</td>
 <td>92:41:04:FF:15:EB</td>
 </tr>
 <tr>
 <td><span class="badge badge-danger">Offline</span></td>
 <td>Computer 2</td>
 <td>192.168.1.22</td>
 <td>5C:3B:C8:EA:6C:3A</td>
 </tr>
 <tr>
 <td><span class="badge badge-success">Online</span></td>
 <td>Computer 3</td>
 <td>192.168.1.23</td>
 <td>BD:2D:94:8A:63:83</td>
 </tr>
 <tr>
 <td><span class="badge badge-success">Online</span></td>
 <td>Computer 4</td>
 <td>192.168.1.24</td>
 <td>9C:D7:16:1F:0B:A3</td>
 </tr>
 <tr>
 <td><span class="badge badge-danger">Offline</span></td>
 <td>Computer 5</td>
 <td>192.168.1.25</td>
 <td>05:C4:95:A6:B2:E6</td>
 </tr>
 </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>
<script>
$(function() { $("#myTable").tablesorter(); });
$(document).ready(function(){
 $("#myInput").on("keyup", function() {
 var value = $(this).val().toLowerCase();
 $("#myTableSearch tr").filter(function() {
 $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
 });
 });
});
</script>
</body>
</html>

Why This Works #

• position: sticky keeps the header aligned with the tbody columns because it stays in the document flow.
• The top: 56px ensures the header sticks just below your fixed navbar, not overlapping it.
• The background color and z-index prevent the table body content from showing through the header when scrolling.
• The media query adjusts for mobile devices where the navbar expands to a taller height.

This solution preserves your existing search and sorting functionality while fixing the sticky header issue!

内容的提问来源于stack exchange，提问作者JC91