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

I want to hide 2 or 3 of these cols using @media queries if possible. the below code didn't 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; }
      }