title: How to make responsive html table to match viewport initial scale 1.0
body: <p>In my website I have some pages consisting with header footer divisons and table, 
  and I am using viewport. </p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  </code></pre>
  
  <p>Html table is consist with so many column so in mobile devices it overflows to the screen.</p>
  
  <p>To see whole html table visitor has to zoom out the webpage.</p>
  
  <p>Like the image refers:</p>
  
  <p><a href="https://i.stack.imgur.com/s91BJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/s91BJ.png" alt="IMAGE AFTER ZOOM OUT THE PAGE"></a></p>
  
  <p>After zooming out you can see in the picture  header and div not expanding to match html table width.</p>
  
  <p>And it remains short in width after zoom out, because I am using meta viewport for this and initial scale is 1.0</p>
  
  <p>but I need result like this </p>
  
  <p>refer image:</p>
  
  <p><a href="https://i.stack.imgur.com/GKAss.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GKAss.png" alt="THIS IS RESULT I WANT"></a></p>
  
  <p>I need help regarding this- when webpage open in browser of mobile devices. </p>
  
  <p>html table should shrink [zoom out] to device width and all other element should remains same in width or equal to device width.</p>
  
  <p>I searched on net and I found this: <a href="http://exisweb.net/responsive-table-plugins-and-patterns" rel="nofollow noreferrer">enter link description here</a> 4. Responsive Tables  </p>