title: How To Make my Table of Rows Responsive
body: <p>Does anybody know how to make my table of rows and columns mobile responsive. I insert my data from the database, but they are not mobile responsive. The element1 and content1 id are for the background of the elements. Can you please tell me how to make my table of rows and columns mobile responsive?</p>
  
  <p>Here is my html and php:</p>
  
  <pre><code>    &lt;section&gt;
  
      &lt;table&gt;
  
              &lt;tr&gt;
              &lt;?php 
                  $counter = 0;
                  while($product = mysqli_fetch_assoc($featured)){
                      if($counter % 4 == 0){
                          echo '&lt;/tr&gt;&lt;tr&gt;';
                      }
                      ++$counter;
                      ?&gt;
                      &lt;td&gt;
                      &lt;div id="element1"&gt;&lt;/div&gt;
                      &lt;div id="content1"&gt;
                          &lt;img src="&lt;?= $product['image']; ?&gt;" alt="&lt;?=         $product['title']; ?&gt;"&gt;
                          &lt;h4&gt;&lt;?= $product['title']; ?&gt;&lt;/h4&gt;
                          &lt;hr&gt;
                          &lt;p class="description"&gt;&lt;?= $product['description']; ?&gt;&lt;/p&gt;
  
              &lt;!--------BUTTON READ MORE--------&gt;
  
              &lt;div id="hovers"&gt;
                  &lt;a href="&lt;?php echo $product['href']?&gt;" class="button" target="_blank"&gt;
                      &lt;span class="contentbut"&gt; Read More&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;?php
                  }
              ?&gt;
              &lt;/tr&gt;
          &lt;/div&gt;
      &lt;/table&gt;    
      &lt;/section&gt;
  </code></pre>
  
  <p>Here is my css:</p>
  
  <pre><code>#element1{
      position: relative;
      z-index:1;
      width:320px;
      height:380px;
      text-align:left;
  
      background: url('../interviewsbackground.png') no-repeat center;
      border:#F90 2px solid;
  
  }
  
  #content1{
      position:relative;
      z-index:2;
      top: -380px;
      width:290px;
      color:#FFF;
      text-align:left;
      margin:34px;
      margin-bottom:-240px;
  }
  
  
      /*-------------------------3D BUTTONS-----------------*/
      .button{
      display:block;
      width:120px;
      height:45px;
      position:relative;
      border:2px solid #04a;
      margin: 0px 0px;
      border-radius:5px;
       }
  
      .button .contentbut{
      display:block;
      position:absolute;
      bottom:6px;
      width:100%;
      height:100%;
      line-height:50px;
      background-color:#09f;
      text-align:center;
      color:#fff;
      text-transform:uppercase;
      box-shadow: 0 6px 0 #06c;
      border-radius:5px;
      transition:all 0.ls linear;
       }
  </code></pre>