jquery - 在小屏幕上以折叠方式显示 DIV 但在桌面上显示正常

Question

当有人在 MOBILE 上打开页面时，我想在 COLLAPSE 中显示 Table DIV，但在 DESKTOP 上它应该显示为简单的 Table WITHOUT collapse。

<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

你应该为此使用媒体查询。在这里您可以找到它如何工作的一些示例:https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    @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;
      }
    } 

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

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