Question

In another question, I have a solution for showing or hiding a div based on the page width.

Displaying elements on my page depending on the page width

Now, I would like a more advanced technic where we show or hide columns in a table based on the page width.

Here is an example of table:

<table>
    <tr>
        <td id="col1">aaa aaaa</td>
        <td id="col2">bbbb bbb</td>
        <td id="col3">ccccc</td>
        <td id="col4">ddd dddd ddd ddd</td>
    </tr>
</table>

Let’s say:

• I would like to display col1 only if page width is greater that 800px.
• I would like to display col2 only if page width is greater that 830px.
• I would like to display col3 only if page width is greater that 860px.
• I would like to display col4 only if page width is greater that 900px.

It has to be dynamic so if the user resize the window, the content has to be shown/hidden.

Do you see what I would like to achieve? Is there a better way of doing this?

Thanks.

Answer 1

@media screen and (max-width: 800px) { 
    #coll1 {
        display:none;
    }
}

@media screen and (max-width: 830px) { 
    #coll2 {
        display:none;
    }
}

… and so forth, should probably do it.

Edit:
Note the limited browser support for media queries in older browsers.