title: CSS - media query - Can not set display: none for div element
body: <p>I have an example about table and some control at the bottom. I want this table control is invisible when screen is small but i don't know it's not working. Can anyone help me? Thanks a lot!</p>
  
  <p>HTML file</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset='UTF-8'&gt;
  
      &lt;title&gt;Responsive Table&lt;/title&gt;
  
      &lt;meta name='viewport' content='width=device-width, initial-scale=1.0'&gt;
  
      &lt;link rel='stylesheet' href='css/style.css'&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id='table-wrap'&gt;    
          &lt;table id='CategoryCMS'&gt;
              &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Category Name&lt;/th&gt;
                  &lt;th&gt;Category Image&lt;/th&gt;
                  &lt;th&gt;Category State&lt;/th&gt;
                  &lt;th&gt;Category Description&lt;/th&gt;
                  &lt;th&gt;Action&lt;/th&gt;
              &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;James&lt;/td&gt;
                  &lt;td&gt;Matman&lt;/td&gt;
                  &lt;td&gt;Chief Sandwich Eater&lt;/td&gt;
                  &lt;td&gt;Lettuce Green&lt;/td&gt;
                  &lt;td&gt;&lt;img src='img/edit.jpg'/&gt;&lt;img src='img/delete.png'/&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;The&lt;/td&gt;
                &lt;td&gt;Tick&lt;/td&gt;
                &lt;td&gt;Crimefighter Sorta&lt;/td&gt;
                &lt;td&gt;Blue&lt;/td&gt;      
                &lt;td&gt;&lt;img src='img/edit.jpg'/&gt;&lt;img src='img/delete.png'/&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;Jokey&lt;/td&gt;
                &lt;td&gt;Smurf&lt;/td&gt;
                &lt;td&gt;Giving Exploding Presents&lt;/td&gt;
                &lt;td&gt;Smurflow&lt;/td&gt;      
                &lt;td&gt;&lt;img src='img/edit.jpg'/&gt;&lt;img src='img/delete.png'/&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;Cindy&lt;/td&gt;
                &lt;td&gt;Beyler&lt;/td&gt;
                &lt;td&gt;Sales Representative&lt;/td&gt;
                &lt;td&gt;Red&lt;/td&gt;  
                &lt;td&gt;&lt;img src='img/edit.jpg'/&gt;&lt;img src='img/delete.png'/&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;Captain&lt;/td&gt;
                &lt;td&gt;Cool&lt;/td&gt;
                &lt;td&gt;Tree Crusher&lt;/td&gt;
                &lt;td&gt;Blue&lt;/td&gt;
                &lt;td&gt;&lt;img src='img/edit.jpg'/&gt;&lt;img src='img/delete.png'/&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;&lt;input style='width: 100%;' type='text'/&gt;&lt;/td&gt;
                &lt;td&gt;&lt;input style='width: 100%;' type='text'/&gt;&lt;/td&gt;
                &lt;td&gt;&lt;input style='width: 100%;' type='text'/&gt;&lt;/td&gt;
                &lt;td&gt;&lt;input style='width: 100%;' type='text'/&gt;&lt;/td&gt;
                &lt;td&gt;&lt;button style='width: 100%;'&gt;Add&lt;/button&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;div id='table-control-wrap'&gt;
              &lt;div id='table-control'&gt;
                  &lt;img id='last' src='img/last.png' alt=''/&gt;
                  &lt;img id='next' src='img/next.png' alt=''/&gt;
  
                  &lt;div id='page-control'&gt;
                      &lt;input id='current-page' type='text' value="1"/&gt;
                      &lt;span&gt;/&lt;/span&gt;
                      &lt;span id='total-page'&gt;50&lt;/span&gt;
                  &lt;/div&gt;          
  
                  &lt;img id='prev' src='img/prev.png' alt=''/&gt;          
                  &lt;img id='first' src='img/first.png' alt=''/&gt;                
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS file</p>
  
  <pre><code>* { 
      margin: 0; 
      padding: 0; 
  }
  body { 
      font: 14px/1.4 Georgia, Serif; 
  }
  #page-wrap {
      margin: 50px;
  }
  p {
      margin: 20px 0; 
  }
  
      /* 
      Generic Styling, for Desktops/Laptops 
      */
      table { 
          width: 100%; 
          border-collapse: collapse; 
      }
      /* Zebra striping */
      tr:nth-of-type(odd) { 
          background: #eee; 
      }
      th { 
          background: #333; 
          color: white; 
          font-weight: bold; 
      }
      td, th { 
          padding: 6px; 
          border: 1px solid #ccc; 
          text-align: left; 
      }
  
      tbody tr:hover td
      {
      background: #ccc;
      color: #339;
      }
  
      #CategoryCMS img {          
              width: 30px;
              height: 30px;
              padding-left: 10px;
              cursor: pointer;
          }
          #CategoryCMS img:hover {
              background-color: #eee;
          }
  
          #CategoryCMS button {
              text-align: center;
              height: 30px;
              cursor: pointer;
          }
  
      #table-control-wrap {
          width: 100%;
      }
  
      #table-control {
          float:right;            
          height: 50px;
          margin-right: 30px;
      }
  
      #table-control img, #table-control #next, #table-control #prev, #page-control {
              display:block;
              float: right;
      }
  
          #table-control img {
              padding: 10px 0 0 0;
              width: 50px;
              height: 50px;
              cursor: pointer;
          }
  
          #table-control img:hover {
              opacity:0.4;
              filter:alpha(opacity=40);
          }
  
          #table-control #next, #table-control #prev{
              width: 40px;
              height: 40px;
              padding: 15px 8px 0 8px;
          }
  
          #table-control input {
              text-align: center;
              width: 30px;
              color: #000;
              font: 16px/1.4 Georgia, Serif; 
          }
  
          #page-control { 
              height: 50px;
              margin: 0;
              padding: 20px 0 0 0;
          }
  
          #table-control span {
              display:inline-block;
          }
  
  /* 
      Max width before this PARTICULAR table gets nasty
      This query will take effect for any screen smaller than 760px
      and also iPads specifically.
      */
      @media 
      screen and (max-width: 760px),
      (min-device-width: 768px) and (max-device-width: 1024px)  {
  
          /* Force table to not be like tables anymore */
          table, thead, tbody, th, td, tr { 
              display: block; 
          }
  
          /* Hide table headers (but not display: none;, for accessibility) */
          thead tr { 
              position: absolute;
              top: -9999px;
              left: -9999px;
          }
  
          tr { border: 1px solid #ccc; }
  
          td { 
              /* Behave  like a "row" */
              border: none;
              border-bottom: 1px solid #eee; 
              position: relative;
              padding-left: 50%; 
          }
  
          td:before { 
              /* Now like a table header */
              position: absolute;
              /* Top/left values mimic padding */
              top: 6px;
              left: 6px;
              width: 45%; 
              padding-right: 10px; 
              white-space: nowrap;
          }
  
          /*
          Label the data
          */
          td:nth-of-type(1):before { content: "Category Name"; }
          td:nth-of-type(2):before { content: "Category Image"; }
          td:nth-of-type(3):before { content: "Category State"; }
          td:nth-of-type(4):before { content: "Category Description"; }
      }   
  
      /* Smartphones (portrait and landscape) ----------- */
      @media only screen
      and (min-device-width : 320px)
      and (max-device-width : 480px) {
          body { 
              padding: 0; 
              margin: 0; 
              width: 320px; 
              }
          #table-control {
              display: none !important;
              visibility: hidden;
          }   
      }
  
      /* iPads (portrait and landscape) ----------- */
      @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
          body { 
              width: 495px; 
          }
          #table-control{
              display: none !important;
              visibility: hidden;
          }   
      }
  </code></pre>