HTML table width property with hidden or collapsed columns with CSS media tags

I am using @media tags in my css file to hide columns in my table when my screen width goes below a certain value.

my table is setup like this.

<table>
<colspan id="col1">
<colspan id="col2">
<colspan id="col3">
<thead>
......

And the hiding happens in the CSS file like this

@media only screen and max-width: 500px) {

#col1 { visibility:collapsed ; }

}

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.

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.

For r开发者_JS百科eference I am testing this page on IE9.

Thanks in advance for any help.

Visibility only effects whether the contents of the item are shown or not, visibility:hidden for instance, hides the contents of the node, but not the space it would take. Try display: none to hide both the contents and the space it would take.

FYI, I found this question and figured another way to solve it by using 'class' instead of 'id'. Define each of your 'td' by 'class', like this:

<tr>
<td class="col1">SAMPLE</td>
<td class="col2">SAMPLE</td>... etc

Then call your display:none on the class (rather than id):

@media only screen and (max-width: 600px) {.col1 { display: none;}}

I'm sure this isn't the most elegant solution, but it works!