表格高度超300px时滚动失效问题求助（附代码）

Hey there! I see you're having trouble getting the scroll functionality working for your table when it exceeds 300px. The core issue here is that the overflow property doesn't work directly on <table> elements—they have unique rendering behavior that ignores overflow settings. Let's fix this step by step:

Step 1: Wrap your table in a scrollable container #

Instead of applying overflow rules to the table itself, add a dedicated <div> wrapper around it. This container will handle the scroll behavior once the table outgrows its fixed height.

Modified HTML snippet (adding the wrapper):

<div class="table-scroll-container">
  <table class="table table-bordered" id="hotkey">
    <!-- Your existing table content stays the same -->
  </table>
</div>

Step 2: Update your CSS styles #

Now apply the height and overflow rules to the wrapper, and tweak the table to fit seamlessly inside it:

/* Scroll container styles */
.table-scroll-container {
  height: 300px;
  overflow-y: auto; /* Vertical scroll only; use 'overflow: auto' for horizontal too */
  width: 97%; /* Match your original table width */
  margin-top: 10px; /* Optional: add spacing from the search bar */
}

#hotkey {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%; /* Make table fill the container */
}

#hotkey td, #hotkey th {
  border: 2px solid #f78800;
  padding: 8px;
}

#hotkey th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  color: #fff;
  background-color: rgba(68, 70, 79, 0.6); /* Optional: darker header for better contrast */
}

#hotkey td {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  color: #fff;
  background-color: transparent;
}

Step 3 (Optional): Fix column alignment during scroll #

If you notice header columns misaligning with the table body when scrolling, add this rule to lock column widths in place:

.table-scroll-container table {
  table-layout: fixed;
}

Why this works #

By using a container div, we create a bounded box where overflow behavior can be properly controlled. The table inside will expand naturally, but once it exceeds the container's 300px height, the container will show a vertical scrollbar to keep content accessible.

Here's your full updated HTML section with the scroll container integrated:

<div id="answer3" class="tab-pane"> 
  <div class="col-md-12" style="background-color:rgba(68, 70, 79,0.4);padding-left:50px;padding-top:5px;border-radius:5px;height:100%;"> 
    <h3>HOTKEY INFO</h3></br> 
    <div class="container" ng-app="sortApp" ng-controller="mainController"> 
      <form> 
        <div class="form-group"> 
          <div class="input-group"> 
            <div style="color:white;background-color:#f78800;border-color:#f78800;" class="input-group-addon"><i class="fa fa-search"></i></div> 
            <input style="width:97%;"type="text" class="form-control" placeholder="Search..." ng-model="searchFish"> 
          </div> 
        </div> 
      </form> 
      <!-- Scroll container added here -->
      <div class="table-scroll-container">
        <table class="table table-bordered" id="hotkey"> 
          <thead> 
            <tr> 
              <td> 
                <a style="color:#f78800;font-weight:bold;font-size:15px;">KEY</a> 
              </td> 
              <td> 
                <a style="color:#f78800;font-weight:bold;font-size:15px;">ON FOOT</a> 
              </td> 
              <td> 
                <a style="color:#f78800;font-weight:bold;font-size:15px;">ON VEHICLE</a> 
              </td> 
            </tr> 
          </thead> 
          <tbody> 
            <tr ng-repeat="roll in sushi | orderBy:sortType:sortReverse | filter:searchFish"> 
              <td>{{ roll.name }}</td> 
              <td>{{ roll.fish }}</td> 
              <td>{{ roll.tastiness }}</td> 
            </tr> 
          </tbody> 
        </table> 
      </div>
    </div> 
  </div> 
</div>

Your AngularJS code doesn't need any changes—this is purely a CSS/HTML structure fix.

内容的提问来源于stack exchange，提问作者Rust Romania Player