Как сделать отзывчивую полосу прокрутки?

Question

У меня есть эта таблица с полосой прокрутки, но я не могу найти решение о том, как сделать ее отзывчивой, когда я меняю размер экрана.

Вот мой HTML:

<p class="scroll"> 
      <table class="table table-hover table-condensed" data-toggle="table" id="resultTable"> 
      <thead class="thead-inverse"> 
      <tr> 
       <th data-sortable="true">Full Name</th> 
       <th>Status</th> 
       <th data-sortable="true">Crew Rank</th> 
       <th data-sortable="true">Check</th> 
      </tr> 
      </thead> 
      <tr> 
      <?php 

      while(mysqli_stmt_fetch($stmt)) { 
      echo "<tr>"; 
      echo "<td class=\"col-md-2\" onclick=\"window.open('../admin/uploaded_file.php?id=$id', '_blank', 'resizable=no,fullscreen=no,top=60,left=100,width=500,height=600')\"><span class=\"glyphicon glyphicon-user\" aria-hidden=\"true\"></span>&nbsp;".sprintf("%s", $full_name)."</td>"; 
      echo "<td class=\"col-md-2\" onclick=\"window.open('../admin/uploaded_file.php?id=$id', '_blank', 'resizable=no,fullscreen=no,top=60,left=100,width=500,height=600')\">".sprintf("%s", $crew_status)."</td>"; 
      echo "<td class=\"col-md-2\" onclick=\"window.open('../admin/uploaded_file.php?id=$id', '_blank', 'resizable=no,fullscreen=no,top=60,left=100,width=500,height=600')\">".sprintf("%s", $crew_rank)."</td>"; 
      echo "<td class=\"col-md-2\"><input type=\"checkbox\" name=\"include[]\" value=\"$id - $full_name\"></td>"; 
      echo '</tr>'; 
      } 
      ?> 
      </tr>  
     </table> 
    </p> 

Вот мой CSS:

<style type="text/css"> 
.scroll { 
    width: 1120px; 
    height: 150px; 
    overflow: scroll; 
    overflow-x: hidden; 
} 
    </style> 

Answer 1

Попробуйте CSS:

<style type="text/css"> 
.scroll { 
    width:100%; 
    max-width: 1120px; 
    height: 150px; 
    overflow: auto; 
    overflow-x: hidden; 
} 
</style> 

Answer 2

я предполагаю, вы имеете в виду Отзывчивый, у вас есть другой подход делает что отзывчивый, однако, мое решение будет использовать Vh, что означает размер Viewport, вы можете изменить свой код на

<style type="text/css"> 
.scroll { 
    width: 100vw; // means 100% of viewport 
    height: 50vh;// or change to whatever you want 
    overflow: scroll; 
    overflow-x: hidden; 
} 
    </style> 

надеюсь, что он работает для вас