CODEWITHSUNDEEP
htmlcssresponsive-design
Adi
Adi

Reputation: 72

How to make a responsive scrollbar?

I have this table with scrollbar but I cannot find a solution on how to make it responsive whenever I change the screen size.

Here is my 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>

Here is my CSS:

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

Upvotes: 1

Views: 11859

Answers (2)

Majid
Majid

Reputation: 2890

I assume you mean Responsive, you have different approach making that responsive, however, my solution would be using Vh means respect Viewport size, you may change your code to 

 <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>

hope it works for you

Upvotes: 1

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

Try this css:

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

Upvotes: 0

Related Questions