IEnumerable IEnumerable - 3 months ago 6
HTML Question

How to best hide a table column for mobile view

I have a HTML table, in a mobile browser I need to hide some of its cols.

I want to hide 2 or 3 of these cols using @media queries if possible.
the below code dint work for me.

<table>
<tr>
<td></td>
<td class='collapsable'></td>
<td class='collapsable'></td>
<td></td>
</tr>
</table>


//hide cols here
td.collapsable {display:block; }

@media only screen and (min-width: 450px) {
//show cols here
td.collapsable {display:none; }
}

Answer

Something like this? (try resizing the Result window/pane)

The HTML:

<tr>
    <td class="one">corpse</td>
    <td>corpse</td>
    <td>corpse</td>
</tr>

The CSS:

table{
        width: 50%;
    }
    td, th{
        border: 1px solid orange;
    }


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