Question

如果窗口宽度小于500px，我想隐藏我的HTML table并显示以下文字："There's not enough space to show table."。有谁知道怎么做？

HTML：

<section>
  <h2>Status</h2>
  <table class="MyClass">
    <caption>Random text</caption>
    <tr>
      <td>Jill</td>
      <td>Smith</td> 
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td> 
      <td>94</td>
    </tr>
  </table>
</section>

CSS：

@media screen and (max-width: 500px){
 .MyClass { 
    display:none;
  }
//SHOW TEXT
}

Answer 1

您可以尝试此https://jsfiddle.net/2Lzo9vfc/154/

<强> CSS

@media (max-width: 500px) {
    section table {
        display: none;
    }    

    section:after {
        content: "There is not enough space to show table";
    } 
}

或者您可以使用JS https://jsfiddle.net/2Lzo9vfc/155/

执行此操作

$(window).resize(function() {
    var width = $(window).width();
    if (width < 500) {
       $('.MyClass').css('display', 'none');
       $('.info').css('display', 'block');          
    } else {
      $('.MyClass').css('display', 'block');
       $('.info').css('display', 'none');
    }
});

如果CSS的窗口宽度太小，则显示HTML文本

1 个答案: