htmlcsshtml-tablemedia-queriesvisibility

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 reference I am testing this page on IE9.

Solution

  • 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.