Question

我想在有人在MOBILE上打开页面时在COLLAPSE中显示表DIV但是在DESKTOP上它应该显示为简单的表而不会崩溃。

<a class="btn btn-primary" data-toggle="collapse" 
  href="#table-collapse" role="button" aria-expanded="false" >
  Hello World
</a>

<table class="table table-borderless" id="table-collapse">
     <tbody>
         <tr>
            <td>Name</td>
            <td>City</td>
            <td>Country</td>
         </tr>
         <tr>
            <td>Name</td>
            <td>City</td>
            <td>Country</td>
         </tr>
    </tbody>
</table>

Answer 1

您应该使用media queries。在这里，您可以找到一些有关其工作原理的示例：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

＆＃13;

    @media only screen and (max-width: 800px) {
     .small-screen { 
      color: green;
      }
      .big-screen { 
      display: none;
      }
    } 

    @media only screen and (min-width: 800px) {
     .small-screen { 
      display: none;
      }
     .big-screen { 
      color: blue;
      }
    }

＆＃13;

    <table class="small-screen table table-borderless">
         <tbody>
             <tr>
                <td>Name</td>
                <td>City</td>
                <td>Country</td>
             </tr>
             <tr>
                <td>Name</td>
                <td>City</td>
                <td>Country</td>
             </tr>
        </tbody>
    </table>
    
        <table class="big-screen table table-borderless">
         <tbody>
             <tr>
                <td>Name</td>
                <td>City</td>
                <td>Country</td>
             </tr>
             <tr>
                <td>Name</td>
                <td>City</td>
                <td>Country</td>
             </tr>
        </tbody>
    </table>

＆＃13;

＆＃13; 如果您在大屏幕上运行此代码，则表格内容将为蓝色，但是当您将窗口大小调整为小尺寸时，颜色会发生变化。我希望这将向您解释媒体查询的工作原理以及如何使用它们。

Answer 2

您可以通过Bootstrap Display属性实现此目的。

我尝试过使用jQuery和Bootstrap版本4的东西。

这是片段。试试这可能会对你有帮助。

<?php
while ($row = mysqli_fetch_array($result)) {
    extract($row)
    MailReminder::sendMail($name , $email, $bID, $start_time, $endtime, $start_day);
}
mysqli_close($conn);
?>

$("#showTable").click(function(){
    $("#collapsedTable").toggleClass('d-none d-sm-block');
});

注意：要检查代码段，请在“全页”上打开代码段并调整屏幕。，当您将屏幕调整为较小的移动尺寸时，将显示按钮，此时将隐藏表格。单击按钮时，将切换表格。

在小屏幕上显示DIV崩溃但在桌面上显示正常

2 个答案: