title: HTML table width property with hidden or collapsed columns with CSS media tags
body: <p>I am using @media tags in my css file to hide columns in my table when my screen width goes below a certain value.</p>
  
  <p>my table is setup like this.</p>
  
  <pre><code>&lt;table&gt;
  &lt;colspan id="col1"&gt;
  &lt;colspan id="col2"&gt;
  &lt;colspan id="col3"&gt;
  &lt;thead&gt;
  ......
  </code></pre>
  
  <p>And the hiding happens in the CSS file like this</p>
  
  <pre><code>@media only screen and max-width: 500px) {
  
  #col1 { visibility:collapsed ; }
  
  }
  </code></pre>
  
  <p>The column hiding works fine, my issue is that the I have my table width property set to 100% or its parent. The problem is that the table with the hidden column does inherit the correct width, it behaves as if the collapsed / hidden column is still there so I just get white space on the right of my table.</p>
  
  <p>I am have no experience using CSS or HTMl but I have search and found nothing. I tried setting the width of the invisible columns to zero, but that made no difference.</p>
  
  <p>For reference I am testing this page on IE9.</p>
  
  <p>Thanks in advance for any help.</p>