Show HTML text if window width is too small with CSS


Tags: html,css

Problem :

I want to hide my HTML table and show the following text: "There's not enough space to show table.", if the window width is smaller than 500px. Anybody know how to do that?

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
}


Solution :

You can try this 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";
    } 
}

Or you can do this with 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 Howto..

    how to make textarea looks like input[text] on form invalid

    How to have an image zoom in and out automatically in the background

    How do I add two buttons side by side that are made up of an image?

    How to use background image in CSS?

    how can you have layers see through each other on a web page

    Sidebar, Navigation and Content how to do it?

    How to set height?

    How to force a responsive element to retain its aspect ratio [duplicate]

    How to get similar style as JQuery UI website itself

    How to increase div width according to the text inside it?

    How to make my footer always stay at the bottom of the page, even when the page content is smaller than the screen?

    How to apply style to the divs that are added dynamically?

    How do I get one element to respond to the click of another element? - CSS/jQuery

    CSS: How to prevent focus from breaking absolute position in overflow:hidden wrapper

    How to modify this CSS based Accordion to work with multiple accordions on the same page?

    How can I align a div right under another?

    how jquery access dynamic css :before and apply filter:brightness [closed]

    Grunt + Sass, how do I include subfolder scss when I compile?

    How to make the logo drop a bit in the nav menu and other suggestions

    How to share js/css/images across Rails applications?

    How to detect when CSS value has changed?

    How to import a CSS file from an external bundle resource

    How do I make my picture slideshow stay behind my header

    CSS How to I align a header with a height of 2em to the bottom

    How to create a curve tail for speech bubble with CSS?

    How to properly link CSS files with PHP footer and header

    How to put a css tag in an element if another has this element [closed]

    how do i get css source file path from firebug?

    How to have background color outside of radius border in a tbody in chrome?

    Hide all other divs with the same name on div hover, show hovered div