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意味着尊重视口大小，你可以将你的代码更改为

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

希望它适合你

如何制作响应式滚动条？

2 个答案: